在 onWheel 事件中使用 event.preventDefault 时，如何规避 reactjs 中的“被动事件监听器”

Posted 2023-02-19

【中文标题】在 onWheel 事件中使用 event.preventDefault 时，如何规避 reactjs 中的“被动事件监听器”

【英文标题】：How can I circumvent "passive eventListeners" in reactjs when using event.preventDefault within an onWheel event

【发布时间】：2019-09-25 08:23:07

【问题描述】：

我试图在 onWheel 事件中阻止默认设置，以使用户滚动到某些元素的一侧而不是向下滚动。当我使用 e.preventDefault 时，我不断收到错误消息：[Intervention] Unable to preventDefault insidepassive event listener due to target being treated aspassive.

到目前为止，我似乎只找到了禁用错误消息的方法。

调用函数的JSX：

    <Wrapper onWheel=(e) => (handleScroll(e))>

调用e.preventDefault()的函数：

  const handleScroll = (e) => 
    e.preventDefault();
    console.info(e.currentTarget);
    const delta = Math.max(-1, Math.min(1, (e.deltaY || -e.detail)));
    e.currentTarget.scrollLeft += delta*40;
  ;

【参考方案1】：

我相信您可以通过手动注册 wheel 事件侦听器来解决此问题。使用ref 获取对您输入的DOM 元素的引用，并在componentDidMount 或useEffect 挂钩中调用addEventListener。