[解決済み] 警告 スクロールブロックの「touchstart」イベントに非受動的なイベントリスナーを追加しました [重複] 。

質問

クロームでアプリケーションを開くと、変な警告が表示されます。

[違反】スクロールブロックに非パッシブイベントリスナーを追加した mousewheel」イベント。イベントハンドラを「パッシブ」としてマークすることを検討してください。 ページをより応答的にしてください。

この件に関して、どなたかplsのヘルプをお願いします。

どのように解決するのですか？

イベントリスナーの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