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

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

由于主线程繁忙，“ 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 ) {
      this.addEventListener("touchstart", handle, { passive: !ns.includes("noPreventDefault") });
  }
};

对于使用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') });
    }
};

对于那些遗留遗留问题的人，找到抛出错误的行并添加{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)

至

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

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

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

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

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

没有休息，灯塔审核不会抱怨听众。

本文地址：http://javascript.askforanswer.com/kaolvjiangshijianchulichengxubiaojiweibeidongyishiyemiangengjuxiangyingxing.html
文章标签：angularjs , hammer.js , javascript , jquery , touch
版权声明：本文为原创文章，版权归 javascript 所有，欢迎分享本文，转载请保留出处！

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

文件下载