ElementUI フォームバリデーション 【違反】スクロールブロックの 'touchmove' イベントに非受動的なイベントリスナーを追加した。 解決方法

1. 問題の説明

• ElementUIのフォームチェックリストをvueプロジェクトで使用する場合、以下の警告が表示されます。
• [Violation] Added non-passive event listener to a scroll-blocking 'touchmove' event. Consider marking event handler as 'passive' to make the page more responsive.
• エラーが報告されたり、正常に動作しないなど、プロジェクトに直接影響を与えるものではありませんが、この一連の警告があることで、将来的に未知の問題が発生する可能性があります。

2. 解決方法

• 上記の問題の原因は、プロジェクトではイベントマネージャー「passive」を追加していないことですが、Google Chromeではバージョン51以降、Chromeに新しいイベントキャプチャーの仕組みが追加されました Passive Event Listeners (これは何をするかというと、前のページ内部のイベントリスナーに、イベントのデフォルト動作をブロックするためにpreventDefault関数が内部で呼ばれるかどうかを伝え、ブラウザがこの情報に基づいてページのパフォーマンスを最適化するためにより良い判断を下すことができるようにするものです。passiveプロパティの値がtrueの場合、リスナーがデフォルトのスワイプ動作を阻止するためにpreventDefault関数を内部的に呼び出さないことを意味し、Chromeはこれをパッシブリスナーと呼びます。Chromeは現在、ページのスライドパフォーマンスを最適化するためにこの機能を使用しているため、パッシブイベントリスナー機能は現在、マウスホイール/タッチ関連のイベントのみをサポートしています。). そこで、解決策を紹介します。 default-passive-events プラグインを使用します。

• // Install the plugin
  npm install -S default-passive-events
  // introduce in main.js
  import 'default-passive-events'