原始的ondblclick方法在执行完两次onclick方法后执行。
所以,如果用该方法,则在click事件中要判断是否是因为双击事件触发的,一般的方法通过setTimeout,即click方法内的代码延迟执行,在执行前判断ondblclick是否执行了,如果已经执行了则不再执行click中的代码。
function CClick() {
var lastClickTime = 0;
var delay = 200;
var status = 0; // 0:click、dbclick事件执行结束了,1:触发了click事件,2:click事件正在执行,3:dbClick事件正在执行
var timeTask;
this.click = function() {
// click、dbClick事件正在执行
if(status === 2 || status === 3) {
return;
}
var cur = new Date().getTime();
// 两次点击事件的间隔时间小于delay,则认为是双击事件
if(status === 1 && (cur - lastClickTime) < delay) {
dbclick();
return;
}
status = 1;
clearTimeout(timeTask); // 如果上一次的click正在执行中,则取消上次的任务。
timeTask = setTimeout(function() {
// click事件还未执行完毕或者dbClick正在执行
if(status === 2 || status === 3) {
return;
}
status = 2;
// do something
status = 0
}, delay);
};
var dbclick = function() {
// dbClick事件还未执行完毕
if(status === 3) {
return;
}
status = 3;
// do something
status = 0;
};
}
使用方法:
对每一个需要操作的元素初始化一个CClick对象,然后在onClick中调用click方法。