解决click和dblclick事件的冲突

问题描述

一个dom上同时绑定了click事件和dblclick事件,click事件可以正常使用,但是dblclick事件在执行时会先执行click事件,导致dblclick事件不能按照预想的方式执行

解决方案

在网上看了一些文章,都提到一种:延时执行click事件,延时250ms效果好点

<div onclick="clickHandle()" ondblclick="dblclickHandle()">这是一句话div>
const timeId = null
// 单击事件
function clickHandle () {
	// 清除上一次的定时器
	clearTimeout(timeId)
	timeId = setTimeout(() => {
		// 单击事件执行逻辑
		// ...
		// 清除定时器
		clearTimeout(timeId)
	}, 250)
}

// 双击事件
function dblclickHandle () {
	// 清除单击事件的定时器
	clearTimeout(timeId)
	// 双击事件执行逻辑
	// ...
}

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