Question

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

因此，如果我将被动标志设置为true ，那么我的handle方法应该是：

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

，并且当我有 false上的标志时：

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

我说的是Passive Event Listeners和浏览器行为。是否仅使用preventDefault()？我是否正确理解？

Answer 1

查看文档here

当前，浏览器无法知道触摸事件侦听器是否要取消滚动，因此它们总是在滚动页面之前一直等待侦听器完成。被动事件侦听器通过使您能够在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>
    );
  }

}

我搜索了如何将选项参数器传递给事件侦听器，而无需在componentDidMount和componentWillUnmount中以响应方式创建它，但是找不到它。

您可以看到here的最佳实现方式，因为某些浏览器会将{passive: true}解释为true，这将产生不同的行为。

将被动addEventListener替换为onTouchStart方法

1 个答案: