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

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中登陆.有关完整的官方解释,请在此处阅

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

您可能必须等待.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
• perfect-scrollbar - 正在进行的问题:https: //github.com/noraesae/perfect-scrollbar/issues/560
• AngularJS - 正在进行的问题:https://github.com/angular/angular.js/issues/15901

Answer 2

以下库解决了该问题。
只需将此代码添加到您的项目中即可。

<script type="text/javascript" src="https://unpkg.com/default-passive-events"></script>

如果您需要更多信息，请访问该图书馆。

Answer 3

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

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

变成

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

Answer 4

对于带有 jquery-ui-touch-punch 的 jquery-ui-dragable，我修复了它类似于 Iván Rodríguez，但还有一个用于 touchmove 的事件覆盖：

jQuery.event.special.touchstart = {
    setup: function( _, ns, handle ) {
        this.addEventListener('touchstart', handle, { passive: !ns.includes('noPreventDefault') });
    }
};
jQuery.event.special.touchmove = {
    setup: function( _, ns, handle ) {
        this.addEventListener('touchmove', handle, { passive: !ns.includes('noPreventDefault') });
    }
};

Answer 5

仅当您未指定时才会发出警告passive。

要抑制此警告，您可以：

addEventListener('touchstart', this.callPassedFuntion, { 
  passive: false 
})

默认情况下，浏览器侦听preventDefault. 所以，它会倾听，但它会让你知道：嘿，你可以在这里改进你的应用程序。如果不能，请告诉我你不能（通过说明：）passive: false。

我根据已接受答案的评论创建了这个答案，对于任何试图找到这个答案的人来说可能更难找到这个答案。

Answer 6

这隐藏了消息

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

Answer 7

在 Laravel 的 select2 下拉插件中也会遇到这个。按照 Alfred Wallace 的建议更改值

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

到

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

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