解决click和dblclick事件的冲突

最新推荐文章于 2024-07-20 17:05:30 发布

hp-future

最新推荐文章于 2024-07-20 17:05:30 发布

阅读量1.3k

点赞数 2

分类专栏： js 前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_42497122/article/details/117930600

版权

前端同时被 2 个专栏收录

29 篇文章

订阅专栏

1 篇文章

订阅专栏

当一个DOM元素同时绑定了click和dblclick事件时，点击可能会触发两次click事件，导致dblclick事件无法正常工作。为了解决这个问题，可以采用延迟执行click事件的方法，设置一个250ms的定时器，在 dblclick 事件中清除该定时器，确保在双击间隔内只执行一次click逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

一个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)
	// 双击事件执行逻辑
	// ...
}