如何区分 mousedown 和 mousedrag

【问题标题】：How to differentiate between mousedown and mousedrag如何区分 mousedown 和 mousedrag
【发布时间】：2022-01-15 07:25:15
【问题描述】：

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

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

注意：我使用的是 scalajs-react，尽管这并不重要。

【问题讨论】：

你为什么使用mouseDown？有没有更合适的事件可以代替？
我猜 mouseup 事件更适合这里。

标签： javascript frontend scala.js scalajs-react

【解决方案1】：

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

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)

【讨论】：