2022年7月へ

[Javascript] (touchstart | touchend) !== click

公開日:

最終更新日:

テクミュ(Tec-Mu)

AI要約

タッチ操作が可能なデバイスでtouchendイベントを素直に利用すると、スクロール中にもイベントが発生し意図しない挙動を招くことがあります。そのため、より安全なイベントとしてmousedownを使う方法が推奨されます。

  • Javascript
  • touchイベント
  • touchstart
  • touchend
  • click
  • addEventListener
  • ユーザビリティ
  • イベント処理
  • スクロール
  • タッチ操作

touch 判定できる端末にて,touchend を愚直に取り入れていたが,意図しない挙動が生まれたのでメモ。

具体的には,画面上を指でスクロールしている際に,addEventListenerでtouchendやtouchstartを指定した要素に指が当たってしまうと,そのイベントも発生する。

これは,あまりよろしくない(使い勝手が悪い)。

他に問題がなければ,mousedown などを使った方が安全なように思う。

©Hiroshi Nagayama