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

2020/10/14 01:41 · javascript ·  · 0评论

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

由于主线程繁忙,“ 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.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
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!