js 单击、双击、连续多次点击

本文链接：https://blog.youkuaiyun.com/weixin_44037153/article/details/119516772

本文详细介绍了JavaScript中的click和dblclick事件处理，包括它们的用法、优先级及如何避免click事件在双击时执行。还探讨了连续点击检测和多事件处理技巧，以及如何在实践中应用这些知识。

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

原生javascript为我们提供了单击和双击（click 和 dblclick）两种点击事件的监听

单击

var oBtn = document.getElementById('clickBtn');
oBtn.onclick = function(){
	console.log('单击');
}

双击

var oBtn = document.getElementById('clickBtn');
oBtn.ondblclick = function(){
	console.log('双击');
}

单击双击同时存在

click和dblclick同时存在，click执行的优先级更高，因此，如果我们将click和dbclick绑定在同一个对象上时，双击对象一共会执行两次click事件和一次dbclick事件，如果我们想执行dbclick的时候不去执行click事件，需要借助一个定时器。

var timer = null;
var oBtn = document.getElementById('clickBtn');
oBtn.onclick = function(){
	clearTimeout(timer);
	timer = setTimeout(function(){
		clearTimeout(timer);
		console.log('单击');
	}, 200)
}
oBtn.ondblclick = function(){
	clearTimeout(timer);
	console.log('双击');
}

连续多次点击

原生javascript里是没有判断多次点击的方法，如果需要判断连续多次点击，需要我们自己去封装一个多次点击的函数。
这里需要注意的一点是，要判断用户是否为连续点击，要去记录用户点击操作的时间间隔，如果时间间隔超过一个值，才将累计点击次数加1，当累计点击次数达到需求时，才触发事件

var timer = null;
var waitTime = 200; // 该时间间隔内点击才算连续点击（单位：ms）
var lastTime = new Date().getTime(); // 上次点击时间
var count = 0; // 连续点击次数
// 获取对象
var oBtn = document.getElementById('clickBtn');
oBtn.onclick = function(event) {
    var currentTime = new Date().getTime();
    // 计算两次相连的点击时间间隔
    count = (currentTime-lastTime) < waitTime ? count + 1 : 1;
    lastTime = new Date().getTime();
    clearTimeout(timer);
    timer = setTimeout(function() {
        clearTimeout(timer);
        // 处理点击事件
        console.log(count);

        if (count > 4) {
            // 连续点击五次或者五次以上的点击事件
            console.log('点击超过4次了')
        }
    }, waitTime + 10)
};