如何区分 mousedown 和 mousedrag

Question

我正在对 onMousedown 事件执行一些操作。 但是随后它们也被执行以进行拖动，因为拖动从鼠标向下开始。

如何确保鼠标拖动不会发生鼠标按下操作？

注意：我使用的是 scalajs-react，尽管这无关紧要。

Answer 1

鼠标拖动事件触发DragEvent类型的事件，鼠标按下仅触发MouseEvent 。 您可以通过验证仅存在于DragEvent中的dataTransfer属性来区分两者，如下所示：

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)