[Intervention] パッシブイベントリスナー内部で、ターゲットがapparentsとして扱われるため、preventDefaultできない。

エラー

説明 違反の内容 touchstart' イベントをブロックするパッシブイベントリスナーが追加されていません。ページをスムーズに表示するためにイベントマネージャー 'passive' の追加を検討してください。上記のヒントは、コンソールのフィルターがVerboseを選択しているためと思われます

ブラウザは、preventDefault()が使用されたかどうかを知る前にイベントハンドラを実行する必要があるため、この結果、ブラウザがスクロールに適時に応答するのが少し遅れます。

そこで、ページスクロールを絹のように滑らかにするために、chrome56 からは、window, document, body に登録された touchstart, touchmove イベントハンドラのデフォルトは passive: true です。ブラウザは preventDefault() を無視して最初にスクロールを行います。そのため
例
wnidow.addEventListener('touchmove', func)は、以下の文章と同じ効果があります。
wnidow.addEventListener('touchmove', func, { passive: true })
という疑問が湧いてきます。
これら3つの要素のtouchstartとtouchmoveイベントハンドラでe.preventDefault()を呼び出しても、ブラウザは無視し、デフォルトの動作を防止することはできないでしょう。

回避策

では、どうすればいいのでしょうか？コンソールプロンプトやpreventDefault()が効果を発揮しないようにするには？
2つのオプションがあります。
1. ハンドラ関数を以下のように登録し、パッシブでないことを明示的に宣言します。
window.addEventListener('touchmove', func, { passive: false })
2. CSS プロパティ touch-action: none; を適用し、タッチイベントが発生してもデフォルトの動作にならず、通常通りタッチイベントが発生するようにします。
touch-actionには他にも多くのオプションがあります。詳細はtouch-actionを参照してください。
すべての要素の touchstart touchmove イベントハンドラは、デフォルトで passive: true になります。