I am performing some actions on onMousedown event. But then they also get executed for drag as drag starts with mouse down.
How can I ensure that actions on mouse-down don't happen for mouse drag?
Note: I am using scalajs-react, though that must not matter.
Mouse drag events trigger an event of DragEvent type, mouse down triggers only MouseEvent. You can differentiate both, by validating dataTransfer attribute, which is only present in DragEvent, like this:
function functionTriggeredOnMouseDownAndDrag(evt) {
if (typeof evt.dataTransfer !== 'undefined') {
// code for mouse drag
} else {
// code for other mouse events
}
}
element.addEventListener('mousedown', functionTriggeredOnMouseDownAndDrag)
element.addEventListener('mousemove', functionTriggeredOnMouseDownAndDrag)