文章目录

单击

原生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)};

如果觉得《js单击 双击 连续多次点击》对你有帮助，请点赞、收藏，并留下你的观点哦！