JavaScript: ドラッグとクリックの識別

JavaScript でドラッグとクリックをどうやって識別するのか、 調べたことをまとめました。

ポイント

いずれも mousedown, mouseup のイベントが発生するが、 mousemove はドラッグの時にしか発生しないので、 mousemove の有無で区別する。

イベント発生の順序

クリックの場合

mousedown → mouseup

ドラッグ(アンド ドロップ)の場合

mousedown → mousemove → mouseup

簡単なサンプルコード

const target = document.getElementById('target')
let isClick = true

target.onmousedown(() => {
  isClick = true
})

target.onmousemove(() => {
  isClick = false
  if (!isClick) {
    // ドラッグ（マウス移動）中の処理
  }
})

target.onmouseup(() ==> {
  if (isClick) {
    console.log('CLICKED')
  } else {
    console.log('DRAGGED')
  }
})

mousedownn, mousemove イベント発生時にフラグを変化させることで、 mouseup イベント発生時にクリックだったのかドラッグだったのかがわかるようになります。

ドラッグが始まると 即座にフラグが反映されるので、 ドラッグ中の処理を行うことも可能です。