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.
- [Vuejs]-How Can I import json data in Vue Js with axios
- [Vuejs]-How to remove a listener bound to an anonymous function?