アプリ開発

ターゲットがパッシブとして扱われるため、パッシブイベントリスナー内のDefaultを防ぐことができません。



Unable Preventdefault Inside Passive Event Listener Due Target Being Treated



最近、fastclickを使用するモバイルベースのトレーニングプロジェクトを作成しました。同じDOMを複数回クリックすると、2回目から、chromeのコンソールに警告が表示されますが、コードの実行には影響しませんが、検索は行われます。いつか。

Unable to preventDefault inside passive event listener due to target being treated as passive.

シナリオ2を使用して、グローバルCSSスタイルで記述しました。touch-action: none



解決策について話させてください：

  • オプション1：
    • ハンドラーを登録するときは、次の方法でパッシブではないことを明示的に宣言します
      window.addEventListener('touchmove', func, { passive: false })
  • オプション2

    • CSSプロパティを適用するtouch-action: noneこのように、タッチイベントはデフォルトの動作を生成しませんが、touchイベントは通常どおりトリガーされます。
      touch-actionまだたくさんのオプションがあります。詳細を参照してください。touch-action

      [注]：将来の可能性のある要素touchstart touchmoveイベントハンドラーはデフォルトでpassive: trueになります



理由：

ブラウザーは、preventDefault（）が使用されているかどうかを知る前にイベントハンドラーを実行する必要があるため、これにより、ブラウザーはわずかな遅延を伴って時間内にスクロールに応答しなくなります。

したがって、ページのスクロールをスムーズにするために、ウィンドウ、ドキュメント、および本文に登録されているtouchstartおよびtouchmoveイベントハンドラーは、chrome56から始まり、デフォルトはpassive：trueです。ブラウザはpreventDefault（）を無視し、最初にスクロールします。

例：
wnidow.addEventListener('touchmove', func) has the same effect as the following sentence
wnidow.addEventListener('touchmove', func, { passive: true })



これは問題につながります：

上記の3つの要素の場合touchstart touchmoveでイベントハンドラーで呼び出されますe.preventDefault()はブラウザによって無視され、デフォルトの動作をブロックしません。
テスト：

body { margin: 0 height: 2000px background: linear-gradient(to bottom, red, green) } // In chrome56, still scroll, and the console will prompt, blablabla window.addEventListener('touchmove', e => e.preventDefault())

元の住所