Chrome for Android 4.4でpointer-events:noneがtouchmoveに効かないときの対処法

問題の概要

Chrome for Android 4.4（ChromeView）では、CSSのpointer-events: noneを指定しても、touchmoveイベントが正しく無効化されないという既知の問題があります。デスクトップ版Chromeや他のブラウザでは期待どおりに動作するため、モバイル向け開発時に混乱を招きやすいポイントです。

この問題に対する実用的な回避策は、JavaScript側でtouchstartイベントを捕捉し、preventDefault()を呼び出してブラウザの既定動作をキャンセルすることです。

touchstartイベントとaddEventListener()による対処

touchstartイベントは、タッチポイントがタッチサーフェス（画面）上に置かれた瞬間に発生します。このイベントをaddEventListener()で監視し、既定の動作を止めることで、pointer-events: noneが機能しない環境でも意図した挙動を実現できます。

overlay.addEventListener('touchstart', function(ev){
    ev.preventDefault();
});

preventDefault()メソッドの役割

上記のコードではpreventDefault()メソッドも併用しています。preventDefault()は、ブラウザが本来実行する既定のアクション（スクロール、ズーム、要素の選択など）をキャンセルするためのメソッドです。

オーバーレイ要素上でのタッチ操作によるスクロールやジェスチャーを防ぎたい場合に特に有効です。また、環境によってはイベントリスナーがパッシブ扱いになりpreventDefault()が無視されるケースがあるため、必要に応じて{ passive: false }オプションを指定するとより確実です。

overlay.addEventListener('touchstart', function(ev){
    ev.preventDefault();
}, { passive: false });

まとめ

Chrome for Android 4.4／ChromeViewでは、CSSのpointer-events: noneだけではtouchmoveを制御できません。JavaScriptのtouchstartイベントとpreventDefault()を組み合わせることで、クロスブラウザ環境でも安定したタッチ操作の制御が可能になります。