Question

I use jQuery.click to handle the mouse click event on Raphael graph, meanwhile, I need to handle mouse drag event, mouse drag consists of mousedown, mouseupand mousemove in Raphael.

It is difficult to distinguish click and drag because click also contain mousedown & mouseup, How can I distinguish mouse “click” & mouse “drag” then in Javascript?

Answer 1

I think the difference is that there is a mousemove between mousedown and mouseup in a drag, but not in a click.

You can do something like this:

const element = document.createElement('div')
element.textContent = 'test'
document.body.appendChild(element)

let moved = false
const downListener = () => {
  moved = false
}
const moveListener = () => {
  moved = true
}
const upListener = () => {
  if (moved) {
    console.log('moved')
  } else {
    console.log('not moved')
  }
}

// Attach listeners
element.addEventListener('mousedown', downListener)
element.addEventListener('mousemove', moveListener)
element.addEventListener('mouseup', upListener)

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