1. ホーム

[違反】スクロールブロックの「mousewheel」イベントに非パッシブなイベントリスナーを追加。

2022-02-16 15:41:25

Element-uiをベースにしたプロジェクトを書くと、Chromeは次のような警告を出します。

[違反】スクロールブロックの「mousewheel」イベントに非パッシブなイベントリスナーを追加しました。

以下のように訳されています。
違反です。touchstart' イベントをブロックするパッシブイベントリスナーが追加されていません。ページをスムーズに表示するために、イベントマネージャー 'passive' の追加を検討してください。

これは、Chromeバージョン51以降、Chromeに新しいイベントキャッチの仕組みである「パッシブイベントリスナー」が追加されたことに起因しています。

パッシブ・イベント・リスナー これは、ページ内の旧イベントリスナーがイベントのデフォルト動作をブロックするために preventDefault 関数を呼び出すかどうかを伝えるもので、ブラウザはこの情報に基づいてページのパフォーマンスを最適化するためにより良い判断を下すことができます。passiveプロパティの値がtrueの場合、リスナーが内部でpreventDefault関数を呼び出してデフォルトのスワイプ動作を阻止しないことを意味し、Chromeはこれをパッシブリスナーと呼びます。Chromeは現在、スワイプのパフォーマンスを最適化するためにこの機能を使用しているため、パッシブイベントリスナー機能は現在、マウスホイール/タッチ関連のイベントのみをサポートしています。

解決策

1. npm i default-passive-events -S

2. main.jsに追加:import 'default-passive-events'

参照されています。 https://blog.csdn.net/dj0379/article/details/52883315