警告:为滚动阻止触摸启动添加了非被动事件监听器'事件

时间:2017-10-03 10:26:47

标签: javascript google-chrome

我在chrome中打开应用程序时收到一个奇怪的警告。我不知道如何摆脱这个警告

  

[违规]为滚动阻止添加了非被动事件侦听器   '鼠标滚轮'事件。考虑将事件处理程序标记为“被动'至   使页面更具响应性。

任何人都可以帮我解决这个问题。谢谢你提前

1 个答案:

答案 0 :(得分:6)

事件监听器的API有更新。

简而言之:

document.addEventListener('touchstart', handler, true);

成为这个:

document.addEventListener('touchstart', handler, {capture: true});

因为在你的情况下,你将事件监听器附加到touchstart,它应该是这样的:

document.addEventListener('touchstart', handler, {passive: true});

通过这种方式,您可以提前设置哪个确切事件以及是否支持被动接口:

var passiveEvent = false;
try {
    var opts = Object.defineProperty({}, 'passive', {
        get: function () {
            passiveEvent = true;
        }
    });
    window.addEventListener("test", null, opts);
} catch (e) { }

// in my case I need both passive and capture set to true, change as you need it.
    passiveEvent = passiveEvent ? { capture: true, passive: true } : true;

//if you need to handle mouse wheel scroll
var supportedWheelEvent: string = "onwheel" in HTMLDivElement.prototype ? "wheel" :
    document.onmousewheel !== undefined ? "mousewheel" : "DOMMouseScroll";

并像这样使用:

elementRef.addEventListener("touchstart", handler, passiveEvent);

有关被动事件侦听器的更多详细信息: https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md