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

Question

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

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

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

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

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

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

Answer 2

这隐藏了警告消息：

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

Answer 3

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

被动事件监听器是DOM规范中的一个新特性，它使开发人员能够选择加入，通过消除滚动来阻止触控式和滚轮式事件监听器，从而提高滚动性能。开发人员可以用{passive:true}注释touch和wheel监听器，以表明他们永远不会调用默认值。该功能在Chrome51、Firefox49中发布，并在WebKit中登陆。有关完整的官方解释，请阅读这里的更多内容。

另请参见：什么是被动事件侦听器？

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

• jQuery。js-持续问题：https://github.com/jquery/jquery/issues/2871