将被动addeventListener替换为OnTouchStart方法

Question

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

所以，如果我在true 上有被动标志，那么我的手柄方法应该喜欢：

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

，当我在false 上有标志时：

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

我说的是被动事件听众和浏览器行为。是否仅使用preventDefault()？我是否正确理解它？

Answer 1

在此处查看文档

当前，浏览器不知道触摸事件侦听器是否会取消滚动，因此他们总是等待听众在滚动之前完成页面。被动事件听众通过使您能够在AddeventListener的选项参数中设置标志来解决此问题，这表明侦听器永远不会取消滚动。

这意味着您会改变事件的行为。如果仅更改preventDefault，则它仍然具有事件的正常行为(不是被动的(。因此，这不会改变任何事情。

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

这将是普通事件，没有被动的。

onTouchStart={handler}

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

而删除

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

因此，您需要使用{passive: true}的.addEventListener，并删除.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>
    );
  }
}

我搜索了如何将选项牧段传递给事件侦听器，而无需在React中的componentDidMount和componentWillUnmount中创建它，但是Coud找不到。

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