情况描述 　　当某个元素，如：div，同时绑定了 click 事件 和 dbl click 事件 ，而这两个 事件 又要处理相对独立的业务，也就是 click 的时候不能触发 dbl click ， dbl click 的时候不能触发 click 。在实际测试中发现，当 dbl click 的时候，总会出现1次 click 。下文将要 解决 的就是这个问题。 情况分析 　　首先我们要清楚 click 和 dbl click 的执行顺序，测试过程略，下面是测试结果： click ：mousedown — mouseup — click dbl click ：mousedown — mouseup — click — mousedown — mouseup

在JS中代码中同一功能块中通常同时会用到单击、双击 事件 ，但通常会遇到一个问题，就是在双击的时候即执行了一次双击 事件 ，而且还执行了两次单击 事件 。此类 冲突 在ZTree、DHTMLX中经常遇到。 想要 解决 两个 事件 冲突 ，需要对单击 事件 进行延时，如果在此延时中又监测到单击 事件 ，那么认为此两次单击属于一个双击 事件 ，则只执行双击 事件 ，并第一时间将延时定时器清理，以防止第二次单击生效。 具体代码如下： var click Flag = null;//是否点击标识（定时器编号） function doOn Click (...) { if( click Flag) {//取消上次延时未执行的 方法 1. 使用修饰符 Vue提供了修饰符来处理 事件 ，我们可以使用 `@ click ` 和 `@ dbl click ` 两个 事件 ，加上 `.prevent` 修饰符来防止浏览器默认行为，以及 `.stop` 修饰符来阻止 事件 冒泡。 <template> <div @ click .stop.prevent="on Click " @ dbl click .stop.prevent="on Dbl Click "></div> </template> <script> export default { methods: { on Click () { // 单击 事件 处理函数 on Dbl Click () { // 双击 事件 处理函数 </script> 2. 使用计时器 当用户单击一个元素时，设置一个计时器，在一定时间内判断是否触发了双击 事件 。如果在这段时间内触发了双击 事件 ，则取消单击 事件 的触发。 <template> <div @ click ="on Click " @ dbl click ="on Dbl Click "></div> </template> <script> export default { data() { return { timer: null methods: { on Click () { this.timer = setTimeout(() => { // 单击 事件 处理函数 this.timer = null }, 300) on Dbl Click () { if (this.timer) { clearTimeout(this.timer) this.timer = null // 双击 事件 处理函数 </script> 以上两种 方法 都可以 解决 单击 事件 和双击 事件 的 冲突 问题，具体使用哪种 方法 ，可以根据实际情况来选择。