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

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

虐人心 发布于 2017-05-18 字数 215 浏览 1181 回复 3

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

浮生未歇 2017-10-22 3 楼

在双击事件(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 事件的处理
}

清晨说ぺ晚安 2017-06-16 2 楼

解决的办法就是两次点击事件的间隔时间,如果第一次点击和第二次单击不会超过一定时间(例如: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>

清晨说ぺ晚安 2017-05-27 1 楼

用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>