将被动addEventListener替换为onTouchStart方法

Question

我想把document.addEventListener('touchstart', handler, {passive: true});换成onTouchStart={handler}

因此，如果我在真上有被动标记，那么我的had方法应该如下所示：

const handler = (event) => { 
    console.log(event); 
} 

当我在假上有一个标志时

 const handler = (event) => { 
    event.preventDefault();
    console.log(event); 
} 

我说的是被动事件侦听器和浏览器行为。仅仅是关于使用preventDefault()还是不使用？我理解得对不对？

Answer 1

查看docs 这里

目前，浏览器无法知道触摸事件侦听器是否会取消滚动，所以总是在滚动页面之前等待监听器完成。被动事件侦听器通过使您能够在addEventListener的options参数中设置标志来解决此问题，指示侦听器永远不会取消滚动。。

这意味着您更改了事件的行为。如果只更改preventDefault，它仍然具有事件的正常行为(而不是被动行为)。所以这不会改变什么。

在文档中，他们说要“删除”preventDefault的原因是，当将被动设置为true时，需要事件的默认操作。

这将是正常的事件，没有被动。

onTouchStart={handler}

这将添加被动动作，但由于preventDefault而删除

const handler = (event) => { 
    event.preventDefault();
    console.log(event); 
} 
...
onTouchStart={handler}

因此，您需要带有.addEventListener的{passive: true}，也需要删除.preventDefault()的任何调用。

以下是如何在任何组件中执行此操作的示例。

class SomeClass extends React.Component {

  componentDidMount() {
    this.elementYouWant.addEventListener("touchstart", this.handleTouchStart, {passive: true});
  }

  componentWillUnmount() {
    this.elementYouWant.removeEventListener("touchstart", this.handleTouchStart);
  }

  handleTouchStart = (e) => {
    console.log(e);
  }

  render() {
    return (
      <div ref={e => this.elementYouWant = e}>
        ...
      </div>
    );
  }

}

我搜索了如何将选项paramenter传递给事件侦听器，而不需要在react中componentDidMount和componentWillUnmount中创建它，但是找不到它。

您可以看到这里是实现它的最佳方式，因为一些浏览器将{passive: true}解释为true，这将创建一个不同的行为。