Chrome 中用于鼠标滚轮 DOMMouseScroll 的 preventDefault() 错误

Question

我在 chrome 控制台中收到此 preventDefault() 错误。我遇到了这个blog article 并尝试了很少像添加{ passive: false } 但没有运气。我该如何解决这个问题？

我还读到建议使用return false;。但我不确定这是否是我的解决方案。所以我正在寻求你的建议。

$(document).on('wheel mousewheel DOMMouseScroll', function(event) {
    event.preventDefault();
    if(delay) return;

    delay = true;
    setTimeout(function(){delay = false},200)
        //some code
    });
})();

镀铬错误

[Intervention] Unable to preventDefault inside passive event listener due to target being treated as passive. See...

谢谢！

Answer 1

根据错误中给出的信息，转到所述错误中链接的 URL，没有明显的方法可以用 jQuery 解决这个问题（可能是，但我不使用 jQuery，所以我说你可以't) ... 使用常规 javascript - 您可以在第三个参数中传递 {passive:false} - 修复了这个 Chrome "feature"

document.addEventListener('wheel', fn, {passive: false});
document.addEventListener('mousewheel', fn, {passive: false});
document.addEventListener('DOMMouseScroll', fn, {passive: false});

function fn(event) {
    event.preventDefault();
    if(delay) return;

    delay = true;
    setTimeout(function(){delay = false},200)
        //some code
}

或者，如果您希望代码更具 jQuery 风格，请创建一个辅助函数

const addListeners = (tgt, list, fn, options) => list.split(' ').forEach(e => tgt.addEventListener(e, fn, options));

然后像这样使用它

addListeners(document, 'wheel mousewheel DOMMouseScroll', function(event) {
    event.preventDefault();
    if(delay) return;

    delay = true;
    setTimeout(function(){delay = false},200)
        //some code
    }, {passive: false}
);

正如 cmets 中提到的，一些 OLD（非常非常老的）浏览器可能不喜欢这种语法 ({passive:true|false})

所以 - 你可能想要功能检测选项 - 来自https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Safely_detecting_option_support的代码

var passiveSupported = false;

try {
  var options = {
    get passive() { // This function will be called when the browser
                    //   attempts to access the passive property.
      passiveSupported = true;
    }
  };

  window.addEventListener("test", options, options);
  window.removeEventListener("test", options, options);
} catch(err) {
  passiveSupported = false;
}

在使用它之前，所以 Internet Explorer 没有一点哭泣