解决双击事件触发两次单击事件

如果一个节点同时绑定了单击和双击事件, 那么双击的时候就会触发两次单击事件, 两个事件存在冲突。

可以通过增加一个延迟时间来解决这个问题.

let click_store = null; // 存储单击事件

// 单击事件
function single(){
    
    
	// 清除第一次单击事件
	clearTimeout(click_store)
	
    click_store = setTimeout(function () {
    
    
        // 单击事件的代码
        // ...
    }, 300)
}

// 双击事件
function double(){
    
    
	// 清除第二次单击事件
	clearTimeout(click_store)
	
	// 双击事件代码
	// ...
}

原理是:

1. 双击时, 首先触发了单击事件, 由于设置了 300ms 的延迟, 所以单击事件并没有立即触发, 这个单击事件被存储在了 click_store 中.
2. 在这300ms内, 发生了第二次单击鼠标的行为(双击), 触发了双击事件和第二次单击事件.
3. 单击事件先发生, clearTimeout(click_store) 清除了存储在 click_store 中的第一次的单击事件, 然后进入定时器, 单击事件被存储在了 click_store 中, 并且延迟300ms执行.
4. 在双击事件中, clearTimeout(click_store) 清除了存储在 click_store 中的第二次单击事件, 然后执行了双击事件的代码.
5. 两次单击事件都被清除了, 所以最后发生的只有双击事件的代码.

本文参考:

1. JavaScript 技巧篇-js增加延迟时间解决单击双击事件冲突，双击事件触发单击事件 (这篇文章给的方法没有取消第二个单击事件, 所以最后会触发双击事件和一次单击事件)
2. 双击事件（dblclick）时，不触发单击事件(click)