警告：在阻止滚动的“touchstart”事件中添加了非被动事件监听器

Question

在Chrome浏览器中打开应用程序时，我遇到了一个奇怪的警告。 我不知道如何摆脱这个警告。

[Violation] 添加了非被动事件监听器到阻止滚动的'mousewheel'事件。 考虑将事件处理程序标记为“被动”，以使页面更具响应性。

请有人帮我解决这个问题。提前致谢。

- yasarui

---

@Bergi，这似乎不完全像是重复的问题。另一个被引用的问题只是询问什么是被动事件监听器——它并没有问如何消除警告。 - mwag

@Bergi，你是在说“如何修复X？”和“如何取消关于X的警告而不需要‘修复’它？”是一样的吗？如果是这样，那么这里有一个看起来与之不同意的SO问题之一：https://dev59.com/nFUL5IYBdhLWcg3w6rto （注：“问题是如何取消这个警告，而不需要解决实际问题”） - mwag

@mwag 这个问题并没有说“不修复实际问题”，而且被接受的答案只是解释了如何修复这个问题 - 这与重复问题的解决方法完全相同。 - Bergi

@Bergi 所以一个问题是否被视为重复取决于那些评判的人是否已知晓答案存在？无论如何，我确实编写了一个回答，介绍了如何在不修复警告的情况下抑制它，在标记为重复的问题中，至少，如果您认为保留有问题的代码的 monkey patch 与“不修复”相同。我想这是否算是一个解决方案可以有不同的争论。 - mwag

我有理由将此取消标记为重复项。我收到了这个警告，涉及到一个附加到选择对象的所谓鼠标滚轮事件，但我从未向任何选择对象添加过这样的侦听器。这是怎么回事？ - David Edwards

Answer 1

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

- Martin Chaov