[Vuejs]-Why couldn't I remove the Listeners?

1👍

When you handle the mousedown event for a particular element, you aren’t guaranteed to receive the corresponding mouseup event on that same element because the mouse button may be released while the pointer is over a different element, or even outside the window entirely.

The only API to allow you to do this is setCapture, though that is very non-standard.

The recommended way to handle mouse events like this is to attach the mousemove and mouseup events to the document element while the mouse is down on the target element. This works because mouse events will bubble up, and mouseup will be fired on the document even when the pointer is outside the browser window.

Simplified:

const onMouseDown = e => {
  document.addEventListener('mousemove', onMouseMove)
  document.addEventListener('mouseup', onMouseUp)
}

const onMouseUp = e => {
  document.removeEventListener('mousemove', onMouseMove)
  document.removeEventListener('mouseup', onMouseUp)
}

const onMouseMove = e => {
  // Handle move event
}

this.whiteboard.addEventListener('mousedown', onMouseDown)

You also have an error with the way you are calling removeEventListener:

this.whiteboard.removeEventListener("mousemove", this)
                                                 ^^^^

The second argument should be the event listener function that you want to remove; this is the component object instance.

Leave a comment