JS中解决单击双击事件的冲突的问题

当一个父节点上即绑定了双击事件,子节点又绑定了单击时,单击或双击子节点时,根据事件流中的冒泡阶段都会先触发子节点上的单击事件,然后冒泡到父节点,而有时我们并不想要子节点的单击事件触发

解决思路:

1. 设置定时器,时间设置为200ms内 (超过200ms延迟效果就会有所感知)

2. 把单击事件的逻辑放在定时器内,每次触发单击事件前先清除之前未执行的定时器,重新开启

3. 触发双击事件同样先清除之前未执行的定时器

4. 效果达成,连续两次单击间隔小于200ms执行双击事件,大于200ms定时器未被清除,执行单击事件逻辑


   
  • 点我点我!

你可能感兴趣的:(javascript,前端,vue.js)