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

我正在使用锤子进行拖动,并且在加载其他内容时会变得不稳定,正如此警告消息告诉我的那样。

由于主线程繁忙,处理“touchstart”input事件被延迟了Xms。 考虑将事件处理程序标记为“被动”,以使页面更具响应性。

所以我试图像这样向听众添加“被动”

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

但我仍然得到这个警告。

对于第一次接受这个警告的人来说,这是由于被称为被动事件监听器的一个尖端function,最近已经在浏览器中实现(2016年夏季)。 从https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

被动事件监听器是DOM规范中的一项新function,它使开发人员无需滚动即可阻止触摸和轮询事件侦听器,从而使开发人员可以select更好的滚动性能。 开发人员可以使用{passive:true}来注释触摸和滚轮侦听器,以指示他们将永远不会调用preventDefault。 此function在Chrome 51,Firefox 49中发布,并已login到WebKit。 完整的官方解释请阅读更多。

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

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

如果您通过JavaScript库间接处理事件,则可能受到特定库对该function的支持。 截至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