如何区分 mousedown 和 mousedrag

Posted 2023-03-24

【中文标题】如何区分 mousedown 和 mousedrag

【英文标题】：How to differentiate between mousedown and mousedrag

【发布时间】：2022-01-15 07:25:15

【问题描述】：

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

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

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

【问题讨论】：

你为什么使用mouseDown？有没有更合适的事件可以代替？

我猜 mouseup 事件更适合这里。

【参考方案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)