🧊

preventDefault()ではなく、touch-actionを使う

ユーザーがページ内の特定の領域をドラッグ操作するなにかを実装するときの話。

それを実装してて誰しもがハマるのが、ユーザーがその領域を触ってるときにページ全体がスクロールされちゃったりするというもの。

で、これを防ぐための方法について。


ev.preventDefault()

古から伝わる方法で、今までずっとこうしてた。

`touchstart`とか`touchmove`とか、ユーザーが画面に触れている間、`preventDefault()`でキャンセルする。

たしかにコレで目的は達成できるけど、いくつかの面で不都合がある。

そういうわけなので、この用途において`preventDefault()`はもはや適切な解決策ではないということ。

CSS: touch-action

touch-action - CSS: Cascading Style Sheets | MDN

そこで使うのが、CSSの`touch-action`プロパティ。

たとえば`touch-action: none`と指定すると、端的にいうとその要素をタッチ端末で触れなくなる。
(正確にはこの挙動は許可する、これは許可しないのように選べる)

なのでJavaScriptで制御して、ドラッグやらピンチインやら操作したい要素には、決まってこのプロパティを指定すべし。

Can I use... Support tables for HTML5, CSS3, etc

ということを、流行りのジェスチャー系のライブラリのコードを読んでて知ったのでした。

余談

html { touch-action: none; } に潜む罠 - console.lealog();

5年前に自分がハマってて、何に使うんかわからんって言ってた。

今ならわかる・・このために使うんやと・・。嗚呼。