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

Question

我正在使用锤子进行拖动，并且在加载其他东西时它会变得不稳定，正如此警告消息告诉我的那样。

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

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

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

但我仍然收到这个警告。

Answer 1

对于那些第一次接收此警告的人来说，这是由于最近（2016年夏天）在浏览器中实现了称为被动事件监听器的前沿功能。来自https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md：

被动事件侦听器是DOM规范中的一项新功能，它使开发人员能够通过无需滚动阻止触摸和轮子事件侦听器来选择更好地滚动性能。开发人员可以使用{passive：true}注释触摸和轮式侦听器，以指示它们永远不会调用preventDefault。此功能在Chrome 51，Firefox 49中提供，并在WebKit中登陆。 For full official explanation read more here.

另见：What are passive event listeners?

您可能必须等待.js库实现支持。

如果您通过JavaScript库间接处理事件，您可能会受到特定库对该功能的支持。截至2016年8月，它似乎没有任何主要图书馆实施支持。一些例子：

• 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
• 完美滚动条 - 持续问题：https://github.com/noraesae/perfect-scrollbar/issues/560
• AngularJS - 正在进行的问题：https://github.com/angular/angular.js/issues/15901

Answer 2

这隐藏了这条消息

    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 });
        }
      }
    };