如何避免在VUE自定义拖拽指令中onmouseup与click事件产生冲突问题？

本文共计796个文字，预计阅读时间需要4分钟。

功能描述：如图，右侧悬浮菜单位置按钮，仅支持上下方向滑动，点击时展开或关闭菜单。

BUG说明：鼠标上下方向滑动时，如果松开时鼠标位于悬浮按钮上，会默认执行click事件。

验证结果：√

功能描述：

如图，右侧悬浮菜单按钮，只支持上下方向拖动，点击时展开或关闭菜单。

BUG说明：

鼠标上下方向拖拽，如果松开时鼠标位于悬浮按钮上会默认执行click事件，经验证，click事件与mouse事件的执行顺序为onmousedown =》onmouseup =》onclick,意味着在click事件执行时会与与其相关的mouse事件冲突。

解决方案：

因为click事件执行时间短，所以利用鼠标拖动的时间差作为标志，在拖拽事件中计算鼠标从onmousedown 到onmouseup 所用的时间差，与200ms作比较，作为全局变量。由于vue的directives自定义指令中无法使用this，所以个人采用给元素设置属性的方式来解决全局变量的存储问题。