Question

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

触摸＆＃39; touchstart＆＃39;输入事件由于延迟了X ms 主线忙。考虑将事件处理程序标记为“被动＆＃39;至使页面更具响应性。

所以我试图添加“被动”＃39;像这样的听众

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-ui-touch-punch的jquery-ui-dragable，我修复了类似于IvánRodrí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 3

这隐藏了消息

    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 4

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

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

到

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

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

Answer 5

我认为除了基于触摸的事件之外，您还可以添加基于滚动的修复程序，以防止谷歌页面分数将其标记为桌面与移动：

// 被动事件监听器（设置标志的两个细微变化）

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") });
    }
};
jQuery.event.special.wheel = {
    setup: function( _, ns, handle ){
        this.addEventListener("wheel", handle, { passive: true });
    }
};
jQuery.event.special.mousewheel = {
    setup: function( _, ns, handle ){
        this.addEventListener("mousewheel", handle, { passive: true });
    }
};

Answer 6

我找到了适用于jQuery 3.4.1 slim

的解决方案

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

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

没有中断，灯塔审核不会抱怨听众。

Answer 7

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

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

成为

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

Answer 8

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

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

如果您需要更多信息，请访问此library。

考虑将事件处理程序标记为“被动＆＃39;使页面更具响应性

8 个答案:

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