mouseup、mousedown与click事件

最新推荐文章于 2024-07-05 16:59:51 发布

原创最新推荐文章于 2024-07-05 16:59:51 发布 · 1.4k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

日常记录专栏收录该内容

12 篇文章

订阅专栏

本文介绍了一种使用timeStamp属性防止mouseup和click事件重复触发的方法，通过对比事件的时间戳，确保只响应一次，适用于高亮、标注等场景。

当一个元素具有点击事件时，在这个元素上同时触发mousedown与mouseup会触发这个元素的点击事件，但是对于类似高亮、标注等功能时，可能mouseup与click会有相同的事件，不希望同时触发，只需要触发一次即可，怎么解决呢？
可以根据event的timeStamp来判断，mouseup和click的timeStamp相同，这个时候做一下判断处理即可

var timeStamp = 0;
document.addEventListener('mouseup', handle);
el.addEventListener('click', handle);
function handle (e) {
	if (timeStamp === e.timeStamp) {
		return;
	}
	// 业务逻辑...
	timeStamp = e.timeStamp
}