如何避免双击时触发单击事件
当一个元素上，同时绑定了双击事件和单击事件，当双击时，会触发单击事件，那么如何避免双击时触发单击事件呢？
分析
首先，点击事件 mouseevent中，有个属性detail，记录了当前点击量。
UIEvent.detail 是只读属性，当值为非空的时候，提供当前点击数 (和环境有关) 。
- 对 click 或者 dblclick 事件，
UIEvent.detail是当前点击数量。 - 对 mousedown 或者 mouseup 事件，
UIEvent.detail是 1 加上当前点击数。 - 对所有的其他UIEvent 对象，
UIEvent.detail总是零。
detail在很短的时间之后会自动重置
- 所以，detail为1，且无后续点击时，为单击事件，detail>1，为双击事件
- 所以，可以判断，短时间内只有一次点击，为单击事件，有多次点击，则为双击事件
到这儿，是不是觉得眼熟，有点像防抖的功能。
没错，我们可以使用防抖函数，来实现这个功能。
import { debounce } from "lodash-es";
export function signalClick<T extends []>(fn: (e: MouseEvent, ...args: T) => void, delay = 300) {
return debounce((e: MouseEvent, ...args: T) => {
if (e.detail == 1) {
fn(e, ...(args as T));
}
}, delay);
}
// 使用
const foo = signalClick((_e,type)=>{console.log(type)})
