js 如何避免鼠标单击和双击冲突

页面上有个div绑定了 click 事件,又绑定了 dblclick 事件。这两个事件分别处理各自的逻辑。现在的问题是当双击的时候虽然是执行了 dblclick 事件,但是在这之前,也执行了 click 事件。如何来屏蔽这次多余的 click 事件呢?

评论 (0)链接2012-03-04 

在双击事件(dblclick)过程中,触发的两次单击事件(click)中,第一次的单击事件(click)会被屏蔽掉,但第二次不会。也就是说双击事件(dblclick)会返回一次单击事件(click)结果和一次双击事件(dblclick) 结果。而不是一次双击事件(dblclick)结果和两次单击事件结果(click)。 所以我们只要屏蔽一次click事件就可以了。

  
var intervalTimer = null;

function do_click(event) {
clearTimeout(intervalTimer); //取消上次延时未执行的方法

intervalTimer = setTimeout(function() {
// click 事件的处理
}, 500);
}

function do_dblclick(event) {
clearTimeout(intervalTimer);
// dblclick 事件的处理
}
该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (2)链接 • 2012-03-04
  • 0 支持
    请问为何要用第四行呢?既然第一次单click事件屏蔽掉了,那么第二次单click在未处理时就被双click事件代码里的cleartimeout取消掉了。 – romanchaos 2012-08-16
  • 0 支持
    刚刚测试过,第一次单击事件不会被屏蔽掉,所以会先触发一次双击事件再来两次单击事件,因此单击双击都要有个cleartimeout,浏览器用的chrome – romanchaos 2012-08-16

解决的办法就是两次点击事件的间隔时间,如果第一次点击和第二次单击不会超过一定时间(例如:300毫秒),如果小于指定的时间间隔,那么就可以认定为双击事件,否则为单击事件。

  
<script language="javascript">
var item = '';
function doClick(n) {
item = n;
var timer = setTimeout("callBack()",3 00);
if(item==2){
clearTimeout(timer);
}
}
function callBack() {
if(item==1){
//单击事件
} else if(item==2){
//双击事件
}
}
</script>

<div onclick="doClick(1)" ondblclick="doClick(2)"></div>
浪际天涯
浪际天涯
13.23K
编辑于 2012-03-07
该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (2)链接 • 2012-03-04
  • 0 支持
    个人还是赞同两次点击事件的间隔时方法 – Thinking80s 2012-09-03
  • 0 支持
    经测试,这样会造成双击事件执行2次。。 – bluebiu 2013-12-13

用jquery实现。

  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">

var Test = {
times: 0,
timer: null,
logs: [],

first: null,
last: null,

do_click: function() {
var self = Test;

self.start();
clearTimeout(self.timer);
self.times++;
self.timer = setTimeout(function() { self.logs.push('click'); self.echo(); }, 300);
},

do_dblclick: function() {
var self = Test;

clearTimeout(self.timer);
self.logs.push('dblclick');
self.echo();
},

start: function() {
if (this.first == null) {
this.first = new Date().getTime();
}
},

end: function() {
if (this.last == null) {
this.last = new Date().getTime();
}
},

get_time: function() {
return (this.last - this.first) || 0;
},

echo: function() {
var self = Test;
self.end();

var log = 'No.' + self.times + '; Use time: ' + self.get_time() + 'ms; Event: ' + self.logs.join(', ') + ';<br />\n';
$('#log').prepend(log);
self.first = null;
self.last = null;
self.logs = [];
},

init: function() {
$(document).ready(function() {
$('div').click(Test.do_click).dblclick(Test.do_dblclick);
});
}
};

Test.init();

</script>
</head>

<body>
<div style="width:200px; height:50px; border:1px solid #999;">Click / DblClick Me!</div>
Log:<br />
<textarea id="log" rows="20" cols="50"></textarea>
</body>
</html>
该答案已被锁定,无法对其进行评论,编辑及投票。
()
评论 (1)链接 • 2012-09-03
  • 0 支持
    请教,这个Test里又自己赋值Test的写法是个什么写法呢 – bluebiu 2013-12-12
德问是一个专业的编程问答社区,请 登录注册 后再提交答案