我正在使用锤子拖拽,它在加载其他东西时变得起伏不定,因为这个警告信息告诉我。
处理'touchstart'输入事件延迟X毫秒由于 主线程忙。考虑将事件处理程序标记为“被动” 使页面反应更灵敏。
所以我试着像这样给听者加上“被动”
Hammer(element[0]).on("touchstart", function(ev) {
// stuff
}, {
passive: true
});
但我还是收到了警告。
我正在使用锤子拖拽,它在加载其他东西时变得起伏不定,因为这个警告信息告诉我。
处理'touchstart'输入事件延迟X毫秒由于 主线程忙。考虑将事件处理程序标记为“被动” 使页面反应更灵敏。
所以我试着像这样给听者加上“被动”
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 - ongoing issue: https://github.com/jquery/jquery/issues/2871 React.js - ongoing issue: https://github.com/facebook/react/issues/6436 React 17 discussion: https://github.com/facebook/react/issues/19651 Hammer.js -由于没有跟进而关闭:https://github.com/hammerjs/hammer.js/pull/987 perfect-scrollbar - closed: https://github.com/noraesae/perfect-scrollbar/issues/560 AngularJS - closed due to won't fix: https://github.com/angular/angular.js/issues/15901
其他回答
对于那些第一次收到这个警告的人来说,这是由于最近(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 - ongoing issue: https://github.com/jquery/jquery/issues/2871 React.js - ongoing issue: https://github.com/facebook/react/issues/6436 React 17 discussion: https://github.com/facebook/react/issues/19651 Hammer.js -由于没有跟进而关闭:https://github.com/hammerjs/hammer.js/pull/987 perfect-scrollbar - closed: https://github.com/noraesae/perfect-scrollbar/issues/560 AngularJS - closed due to won't fix: 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 3.4.1 slim
在取消最小化之后,在第1567行中将{passive: true}添加到addEventListener函数中,如下所示:
t.addEventListener(p, a, {passive: true}))
什么都不会坏,灯塔审计也不会抱怨监听者。
对于那些受困于遗留问题的人,找到抛出错误的行并添加{passive: true} -例如:
this.element.addEventListener(t, e, !1)
就变成了
this.element.addEventListener(t, e, { passive: true} )
我认为除了基于触摸的事件,你可以添加基于滚动的修复,以防止谷歌页面分数从桌面vs移动标记:
//被动事件监听器(Tw0在设置标志时有轻微变化)
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 });
}
};