React警告滚动阻塞“touchstart”的非被动事件侦听器

我有一个带有 Material-ui Slider 的 React 组件。 每次渲染此组件时，我都会收到此警告： “向滚动阻塞‘touchstart’事件添加了非被动事件侦听器。考虑将事件处理程序标记为‘被动’以使页面响应更快”

如何解决这个问题？

许多库和框架默认添加非被动事件侦听器。您对此无能为力。我建议使用高度灵活和可配置的方式，而不是等待支持被动事件支持 https://www.npmjs.com/package/passive-events-support包来调试并使事件侦听器被动，而无需接触第 3 方源代码。

首先，安装包后调试触摸和滚轮事件侦听器及其参数：

import { passiveSupport } from 'passive-events-support/src/utils'
passiveSupport({ debug: true })

这应该控制台记录所有事件侦听器

[Passive Events Support] Non-passive Event Listener
  element: div.some-element
  event: 'touchstart'
  handler:
    fn: ƒ (e)
    fnArgument: 'e'
    fnContent: 'console.log(e)'
    fnPrevented: false
  arguments: false

Notice arguments参数，如果是false, undefined或没有对象passive参数内，此事件会导致浏览器引发警告并影响滚动性能。

要修复它，只需使用包和记录的信息来使这个确切的事件侦听器成为被动的：

import { passiveSupport } from 'passive-events-support/src/utils'
passiveSupport({
  debug: false,
  // add this one
  listeners: [
    {
      element: 'div.some-element',
      event: 'touchstart'
    }
  ]
})

不过要小心，调用的事件侦听器preventDefault()不应标记为被动，但要修复警告仍应具有passive参数值为false反而。

默认情况下，包将检查处理程序本身是否阻止了事件侦听器，但如果处理程序内部调用的方法阻止了事件侦听器，则包将失去对它的跟踪。强制分配passive: false只是通过prevented: true参数为listeners item:

passiveSupport({
  //...
  listeners: [
    {
      element: 'div.some-element',
      event: 'touchstart',
      prevented: true
    }
  ]
})

对我来说，这个包修复了由 Materialize 和 jquery 引起的所有警告。希望它也对您有帮助。