Javascript 考虑将事件处理程序标记为A*X27；被动'；使页面更具响应性

我用锤子来拖拽，当装载其他东西时，锤子会变得颠簸，这条警告信息告诉我

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

所以我试着像这样给听众加上被动语态

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

---

但是我仍然收到了这个警告。

对于那些第一次收到这个警告的人来说，这是因为最近（2016年夏天）浏览器中实现了一个名为被动事件侦听器的前沿功能。发件人：

被动事件监听器是DOM规范中的一个新特性，它支持 开发人员选择加入，通过消除 需要滚动以阻止触控和滚轮事件侦听器。 开发人员可以使用{passive:true}注释touch和wheel侦听器 表示他们永远不会调用preventDefault。此功能 Chrome 51、Firefox 49和WebKit均已上市

另见：

您可能需要等待.js库实现支持。 如果您是通过JavaScript库间接处理事件，那么您可能会受制于该特定库对该功能的支持。截至2019年12月，似乎没有任何主要图书馆实施支持。一些例子：

• jQuery.js-当前问题：
• React.js-持续问题：
• Hammer.js-因无后续行动而关闭：
• 完美滚动条-关闭：
• AngularJS-因无法修复而关闭：

---

这会隐藏警告消息：

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

---

我找到了一个解决方案

取消缩小后，将

{passive:true}

添加到第1567行的addEventListener函数中，如下所示：

t.addEventListener（p，a，{passive:true}））

---

没有中断，lighthouse审计不会抱怨侦听器。

对于那些被遗留问题困扰的人，找到抛出错误的行，并添加

{passive:true}

-例如：

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

变成

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

---

在Laravel的select2下拉插件中也会遇到这种情况。根据Alfred Wallace的建议从

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

到

---

解决了这个问题。我不知道他为什么会投反对票，但这对我来说很有效

对于带有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') });
    }
};

---

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

//被动事件侦听器（Tw0在设置标志时略有变化）

---

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

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

---

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

爱奥尼亚图书馆如何？我正在调用

preventDefault（）

-是否可以抑制此警告？@maja no-谷歌地图JavaScript API版本3也会生成这些警告。正在跟踪此问题。（有点讽刺，考虑到Google Chrome正在警告Google Maps JavaScript API生成的违规行为。）要抑制此警告，您可以“addEventListener（'touchstart'，this.callPassedFunction，{passive:false}”），目标不是停止实际事件吗？在处理完这个问题之前，我不想隐藏消息。我认为这是jquery库的问题。我认为开发者必须修复它。但是如果你能得到它，请告诉我怎么做。非常感谢你，伊万！是的。嘿，现在我很好奇。。。我正在使用d3插件，我收到了2300条违规信息。也许你的代码会有帮助！我会随时通知你的@yardpenalty.com，不，停止活动不是目标！警告表示您已放置侦听器，但未指定它是否可能阻止事件的默认行为。如果要调用

preventDefault（）

，则应指定

被动：false

。如果不是，请指定

被动：true

。只有在未指定任何一项时，才会收到警告。如果指定

passive:true

并调用

preventDefault（）

，则会导致错误，默认值不会被阻止。在这里，指定

被动
不是一种技巧。这就是解决办法。这就是警告所要求的@谢谢你的评论。这已经有几年了，但我一定会记住未来的解决方案！永远不要更改库的源代码；您应该重写它。您如何在jquery中实现对事件侦听器的重写？对，绝对同意不更改库。。。只是说这是一个解决方案谢谢你，兄弟，这很好用JQuery 3.5.1测试，这解决了我的问题！
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 });
    }
};

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