我的页面上有一个元素，我需要将 onclick 和 ondblclick 事件处理程序附加到该元素。当单击发生时，它应该执行与双击不同的操作。当我第一次开始尝试进行这项工作时，我的头开始旋转。显然，当您双击时，onclick 总是会触发。所以我尝试使用这样的基于超时的结构......
window.onload = function() {
var timer;
var el = document.getElementById('testButton');
el.onclick = function() {
timer = setTimeout(function() { alert('Single'); }, 150);
}
el.ondblclick = function() {
clearTimeout(timer);
alert('Double');
}
}
但我得到了不一致的结果（使用 IE8）。它可以正常工作很多次，但有时我会收到两次“单一”警报。
以前有人这样做过吗？有没有更有效的方法？
像 Matt 一样，当我稍微增加超时值时，我的体验要好得多。此外，为了缓解单击两次触发的问题（无论如何我无法用更高的计时器重现），我在单击处理程序中添加了一行：
el.onclick = function() {
if (timer) clearTimeout(timer);
timer = setTimeout(function() { alert('Single'); }, 250);
}
这样，如果点击已经设置为触发，它将自行清除以避免重复的“单一”警报。
如果您收到 2 个警报，那么您检测双击的阈值似乎太小了。尝试增加 150 到 300 毫秒。
另外 - 我不确定您是否保证 click 和 dblclick 被触发的顺序。因此，当您的 dblclick 被触发时，它会清除第一个click 事件，但如果它在第二个“click”事件之前触发，则第二个事件仍会自行触发，并且您最终会同时遇到双击事件触发和单击事件触发。
我看到了针对这个潜在问题的两种可能的解决方案：
1) 为实际触发双击事件设置另一个超时。在您的代码中标记双击事件即将触发。然后，当第二个“单击”事件触发时，它可以检查这个状态，并说“oop，dbl 点击挂起，所以我什么都不做”
2）第二个选项是根据点击事件交换您的目标功能。它可能看起来像这样：
window.onload = function() {
var timer;
var el = document.getElementById('testButton');
var firing = false;
var singleClick = function(){
alert('Single');
};
var doubleClick = function(){
alert('Double');
};
var firingFunc = singleClick;
el.onclick = function() {
// Detect the 2nd single click event, so we can stop it
if(firing)
return;
firing = true;
timer = setTimeout(function() {
firingFunc();
// Always revert back to singleClick firing function
firingFunc = singleClick;
firing = false;
}, 150);
}
el.ondblclick = function() {
firingFunc = doubleClick;
// Now, when the original timeout of your single click finishes,
// firingFunc will be pointing to your doubleClick handler
}
}
基本上这里发生的事情是你让你设置的原始超时继续。它总是会调用 fireFunc(); 唯一改变的是 fireFunc() 实际指向的内容。一旦检测到双击，它就会将其设置为 doubleClick。然后我们总是在超时到期后恢复到 singleClick。
我们在那里还有一个“触发”变量，所以我们知道拦截第二个单击事件。
另一种选择是完全忽略 dblclick 事件，只需通过单击和计时器来检测它：
window.onload = function() {
var timer;
var el = document.getElementById('testButton');
var firing = false;
var singleClick = function(){
alert('Single');
};
var doubleClick = function(){
alert('Double');
};
var firingFunc = singleClick;
el.onclick = function() {
// Detect the 2nd single click event, so we can set it to doubleClick
if(firing){
firingFunc = doubleClick;
return;
}
firing = true;
timer = setTimeout(function() {
firingFunc();
// Always revert back to singleClick firing function
firingFunc = singleClick;
firing = false;
}, 150);
}
}
这是未经测试的:)
简单的：
obj.onclick=function(e){
if(obj.timerID){
clearTimeout(obj.timerID);
obj.timerID=null;
console.log("double")
}
else{
obj.timerID=setTimeout(function(){
obj.timerID=null;
console.log("single")
},250)}
}//onclick
小修复
if(typeof dbtimer != "undefined"){
dbclearTimeout(timer);
timer = undefined;
//double click
}else{
dbtimer = setTimeout(function() {
dbtimer = undefined;
//single click
}, 250);
}
, cellclick :
function(){
setTimeout(function(){
if (this.dblclickchk) return;
setTimeout(function(){
click event......
},100);
},500);
}
, celldblclick :
function(){
setTimeout(function(){
this.dblclickchk = true;
setTimeout(function(){
dblclick event.....
},100);
setTimeout(function(){
this.dblclickchk = false;
},3000);
},1);
}