web-dev-qa-db-ja.com

Angular 4-スクロールをブロックする「mousewheel」イベントに非パッシブイベントリスナーを追加しました。

私のAngular 4プロジェクトでは、日付ピッカーまたは選択オプションメニューをクリックしてGoogle Chromeで実行すると、次の警告が表示されます。

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

私はすでにここでスタックオーバーフローの問題を見ましたが、それは「マウスホイール」ではなく「タッチスタート」に関するものでした。警告がどこから来ているのかわからないので、どのコード例を提供できるのか本当にわかりません。誰かがこの問題で私を助けることができますか？

angulargoogle-chromeevent-listenermousewheel
4
Angie

パッシブイベントとは何ですか？

パッシブイベントリスナーはDOM仕様の新機能であり、タッチイベントリスナーとホイールイベントリスナーをブロックするためにスクロールする必要がないため、開発者はスクロールパフォーマンスの向上をオプトインできます。開発者は、タッチリスナーとホイールリスナーに{passive：true}の注釈を付けて、preventDefaultを呼び出さないことを示すことができます。この機能はChrome 51、Firefox 49で出荷され、WebKitに導入されました。 参照 。

Chromeは警告をスローします...

[Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive.

...マウスのスクロールイベントにバインドする場合、preventDefault()を呼び出すことにより、イベントのスクロールパフォーマンスを禁止したか、デフォルトのイベントを無効にした可能性があることを基本的に警告します。

パッシブイベントでpreventDefault()を呼び出そうとしても、Chromeはエラーをスローします。

Unable to preventDefault inside passive event listener invocation.

Firefoxにも同様のエラーがありますが、Chromeのような警告はスローされないようです。

Ignoring ‘preventDefault()’ call on event of type ‘wheel’ from a listener registered as ‘passive’.

警告ショーケース

次のスニペットを実行して、Chromeコンソールを詳細モードで表示します。

// WILL throw violation
document.addEventListener("wheel", function(e) {
  e.preventDefault(); // prevents default browser functionality
});

// will NOT throw violation
document.addEventListener("wheel", function(e) {
  e.preventDefault(); // does nothing since the listener is passive
}, {
  passive: true
});

問題の解決

同様の SO post は、javascriptでのこれの意味について作成されました。

タッチリスナーまたはホイールリスナーをパッシブとしてマークすることにより、開発者は、ハンドラーがpreventDefault()を呼び出してスクロールを無効にしないことを約束しています。これにより、ブラウザがJavaScriptを待たずにすぐにスクロールに応答できるようになり、ユーザーが確実にスムーズにスクロールできるようになります。

Angularは、このための汎用/使いやすさのソリューションをまだ実装しておらず、従うことができます ここ 。

ただし、TypeScriptがjavascriptにコンパイルされているため、TypeScriptで上記のスニペットを実装しても、違反は無効になります。

パフォーマンスへの影響

違反自体はアプリケーションのパフォーマンスにまったく害を及ぼしませんが、イベント関数の内容は-である可能性があります。したがって、Chromeがこの警告をスローします。この警告はVerbose console modeとにのみ表示されることに注意してください。一般ユーザーには表示されません。

私の知る限り、このような警告は、実行時にChromeがコードを解釈することによって生成されるため、無効にする方法はありません。

2
mruanova