mousedown mousemove mouseup 与 click事件冲突的解决办法

使用css样式pointer-events解决

需要用到mousedown mousemove mouseup的时候一般都是在拖拽事件中,但是click的触发条件就是mousedown+mouseup,而且它们的执行顺序也是

mousedown > mousemove > mouseup > click
先说一下我的场景:我在做一个拖拽方法,但是我不希望在拖拽的时候触发容器内部的click事件。

理一下思路

要实现拖拽方法需要 mousedown + mousemove + mouseup
click事件需要 mousedown + mouseup

那么只要想个办法阻止mousedown 和 mouseup 同时发生,就能阻止click事件,看到拖拽方法中多的一个mousemove事件,显而易见的只能是在这上面找找办法了。

解决办法

pointer-events属性可以阻止设置了该样式的容器的鼠标事件的触发,也就是说设置了该属性,这个容器就无法点击了,并且这个容器内部的任何点击行为都无法触发,但是如果容器内部的元素也设置了该属性的其他值,则可以继续触发。利用该属性,可以达到组织事件穿透的效果。

我在mousemove的监听事件中加入了这行代码,此时,在我开始拖动的时候,对于click事件来说,原先的mousedown事件就丢失了,因此click事件不满足触发条件,无法执行

// el指的是dom元素,你要阻止事件穿透的容器
el.style.pointerEvents = 'none'

然后我在mouseup的监听事件中将值取消,来恢复el这个容器的点击行为

el.style.pointerEvents = null

不该在 mousedown 中设置该属性,否则按钮的click事件就无法执行了,就像前面说的,click事件的执行需要mousedown + mouseup,毕竟拖动事件和容器内部的点击事件都是要先进行mousedown才能继续往下走的。

参考文章

div阻止点击穿透+实现点击穿透

你可能感兴趣的:(javascript,html)