警告：向阻止滚动的“touchstart”事件添加了非被动事件侦听器[重复]答案

【问题标题】：Warning: Added non-passive event listener to a scroll-blocking 'touchstart' event [duplicate]警告：向阻止滚动的“touchstart”事件添加了非被动事件侦听器[重复]
【发布时间】：2018-03-14 12:33:11
【问题描述】：

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

[Violation] 向滚动阻塞添加了非被动事件侦听器 “鼠标滚轮”事件。考虑将事件处理程序标记为“被动”以使页面更具响应性。

任何人请帮我穿上这个。在此先感谢

【问题讨论】：

@Bergi，这看起来并不完全像个骗子。另一个引用的问题仅询问被动事件侦听器是什么——它不询问如何使警告静音
@mwag 它解释了它们是什么以及如何使用它们。警告告诉您使用它们。（这解决了问题，而不仅仅是消除警告）
@Bergi 你是说“如何修复 X？”与“如何在不'修复'的情况下抑制有关 X 的警告？”如果是这样，这可能是数千个似乎不同意的 SO 问题之一：stackoverflow.com/questions/49600947/…（注意：“问题是 - 如何在不解决实际问题的情况下抑制此警告”）
@mwag 问题并没有说“没有解决实际问题”，而接受的答案只是解释了如何解决问题 - 这与副本的含义完全相同。
@Bergi 所以一个问题是否被认为是欺骗取决于判断的人是否知道答案存在？无论如何，我确实写了一个关于如何在不修复警告的情况下抑制警告的答案，在标记为欺骗的问题中，至少，如果您认为将有问题的代码留在原地的猴子补丁与“不修复”相同.我想无论哪种方式都可以争论它是否是一个修复。

标签： javascript google-chrome

【解决方案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

【讨论】：