Javascript设置拖拽时不触发点击事件

如何设置拖拽时不触发点击事件

问题: 今天遇到的，当给 dom 添加点击事件时，如果这个 dom 节点还能拖拽时，当拖拽时也会触发点击事件，其实我是不想要它拖拽时触发点击事件的，那么该如何解决呢？

分析

一个完整的 click 事件是包含了鼠标按下 mousedown 和鼠标抬起 mouseup 这两个事件的，而当我们拖拽时包含了鼠标按下 mousedown、鼠标移动 mousemave 和鼠标抬起 mouseup 这三个事件的。

我们可以从这个 mousemove 事件入手，点击事件时 mousedown 与 mouseup 触发产生的两个坐标 (e.offsetX, e.offsetY) 是一样的，而拖拽时鼠标移动了一定的距离，具体体现在 px 上。

解决问题

我们可以监听鼠标按下 mousedown 和鼠标抬起 mouseup 这两个事件，对比他们触发时的坐标 (e.offsetX, e.offsetY)，如果这两个事件触发的坐标是一样的，那么可以认为是点击事件 click 触发，反之则认为是拖拽事件。

const container