1. ホーム
  2. javascript

[解決済み] マウスの "クリック "と "ドラッグ "の見分け方

2022-04-14 02:29:27

質問

私が使っているのは jQuery.click はRaphaelグラフのマウスクリックイベントを処理するために必要であり、一方、私はマウス drag イベント、マウスドラッグは mousedown , mouseupmousemove をRaphaelに搭載しました。

を区別することは困難です。 clickdrag なぜなら click も含まれています。 mousedown &です。 mouseup Javascriptでマウスのクリックとドラッグを区別するにはどうしたらいいですか?

どのように解決するのですか?

という違いがあると思います。 mousemove の間に mousedownmouseup をドラッグで使用することはできますが、クリックで使用することはできません。

というようなことができます。

const element = document.createElement('div')
element.innerHTML = 'test'
document.body.appendChild(element)
let moved
let downListener = () => {
  moved = false
}
element.addEventListener('mousedown', downListener)
let moveListener = () => {
  moved = true
}
element.addEventListener('mousemove', moveListener)
let upListener = () => {
  if (moved) {
    console.log('moved')
  } else {
    console.log('not moved')
  }
}
element.addEventListener('mouseup', upListener)

// release memory
element.removeEventListener('mousedown', downListener)
element.removeEventListener('mousemove', moveListener)
element.removeEventListener('mouseup', upListener)