考虑将事件处理程序标记为“被动”，以使页面更具响应性

我正在用锤子拖动，加载其他东西时它变得不稳，因为此警告消息告诉我。

由于主线程繁忙，“ touchstart”输入事件的处理延迟了X ms。考虑将事件处理程序标记为“被动”，以使页面更具响应性。

所以我试图像这样向听众添加“被动”

Hammer(element[0]).on("touchstart", function(ev) {
  // stuff
}, {
  passive: true
});

但我仍然收到此警告。

对于那些初次收到此警告的用户，这是由于最近才在浏览器中实现了称为“ 被动事件侦听器”的最新功能（2016年夏季）。从https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md：

被动事件侦听器是DOM规范中的一项新功能，使开发人员可以选择消除滚动而阻塞触摸和滚轮事件侦听器，从而选择更好的滚动性能。开发人员可以使用{passive：true}注释触摸和滚轮侦听器，以表示他们将永远不会调用preventDefault。该功能已在Chrome 51，Firefox 49和WebKit中提供。有关完整的官方说明，请在此处了解更多信息。

另请参阅：什么是被动事件侦听器？

您可能需要等待.js库实现支持。

如果要通过JavaScript库间接处理事件，则可能会受该特定库对功能的支持的支配。截至2019年12月，似乎所有主要图书馆都未实现支持。一些例子：

• jQuery.js-持续存在的问题：https : //github.com/jquery/jquery/issues/2871
• React.js-持续存在的问题：https : //github.com/facebook/react/issues/6436
• Hammer.js-因未跟进而关闭：https : //github.com/hammerjs/hammer.js/pull/987
• perfect-scrollbar-已关闭：https： //github.com/noraesae/perfect-scrollbar/issues/560
• AngularJS-由于无法修复而关闭：https : //github.com/angular/angular.js/issues/15901

这隐藏了警告消息：

jQuery.event.special.touchstart = 
{
  setup: function( _, ns, handle )
  {
    if ( ns.includes("noPreventDefault") ) 
    {
      this.addEventListener("touchstart", handle, { passive: false });
    } 
    else 
    {
      this.addEventListener("touchstart", handle, { passive: true });
    }
  }
};

在Laravel的select2下拉插件中也会遇到此问题。根据Alfred Wallace的建议更改值

this.element.addEventListener(t, e, !1)

至

this.element.addEventListener(t, e, { passive: true} )

解决了这个问题。为什么不投票，我不知道，但这对我有用。

对于那些遗留遗留问题的人，找到抛出错误的行并添加{passive: true}-例如：

this.element.addEventListener(t, e, !1)

变成

this.element.addEventListener(t, e, { passive: true} )

我找到了适用于jQuery 3.4.1 slim的解决方案

取消缩小后，按如下所示添加{passive: true}到第1567行的addEventListener函数：

t.addEventListener(p, a, {passive: true}))

没有任何休息和灯塔审核不会抱怨听众。