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