【问题标题】:What happens if I don't test Passive event listeners support?如果我不测试被动事件侦听器支持会发生什么?
【发布时间】:2018-05-17 14:00:45
【问题描述】:

Chromium 警告我,我的事件侦听器不是被动的。

很好。

我不会在那里使用event.preventDefault(),所以我愿意让它被动。

但是当我阅读detailed explanation时,该示例使用Modernizr来检查属性是否可用。

addEventListener(document, "touchstart", function(e) {
  }, Modernizr.passiveeventlisteners ? {passive: true} : false);

但我没有安装 Modernizr,我发现为这个非常具体的用例设置它很痛苦。

所以问题是:如果我盲目地写会发生什么:

$el.addEventListener('touchstart', () => {}, {passive: true})?

在旧浏览器中?

我的猜测是该对象可能被评估为true,对吗?不会出现错误?

【问题讨论】:

    标签: javascript dom-events modernizr event-bubbling


    【解决方案1】:

    {passive: true} 将被评估为true,这样应该可以消除 Chromium 警告,但根据您提供的链接,它可能在旧版浏览器上出现“不可预见的结果”。

    这个方法(也建议在那个链接中)对我来说似乎很好,它不需要任何其他库:

    // Test via a getter in the options object to see if the passive property is accessed
    var supportsPassive = false;
    try {
      var opts = Object.defineProperty({}, 'passive', {
        get: function() {
          supportsPassive = true;
        }
      });
      window.addEventListener("testPassive", null, opts);
      window.removeEventListener("testPassive", null, opts);
    } catch (e) {}
    
    // Use our detect's results. passive applied if supported, capture will be false either way.
    elem.addEventListener('touchstart', fn, supportsPassive ? { passive: true } : false);
    

    【讨论】:

    • 谢谢。我仍然觉得这很重,但我想别无选择。如果浏览器本身包含对每个功能的一些检查,那会很舒服。
    猜你喜欢
    • 1970-01-01
    • 2023-03-10
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2016-07-17
    • 2011-03-31
    • 2019-07-06
    • 1970-01-01
    相关资源
    最近更新 更多