jQuery-一个元素上同时绑定单击和双击事件后双击触发单击事件如何解决?

jQuery-一个元素上同时绑定单击和双击事件后双击触发单击事件如何解决?

甜柠檬 发布于 2017-09-21 字数 479 浏览 1345 回复 2

可能重复的问题
js 如何避免鼠标单击和双击冲突

一个元素上同时绑定单击和双击事件后,双击触发单击事件。
请问如何才能实现双击时只触发双击事件呢?

代码如下:

$(function(){

$(".testdiv").click(function(){
alert("click");
}).dblclick(function(){
alert("dblclick");
});

});

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

扫码加入群聊

发布评论

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

评论(2

偏爱自由 2017-10-22 2 楼

给一个不错的jQuery插件推荐,http://jsfiddle.net/Guffa/pfQfK/

归属感 2017-09-24 1 楼

双击(dblclick)的流程是:mousedown,mouseout,click,mousedown,mouseout,click,dblclick;

在双击事件(dblclick),触发的两次单击事件(click)中,第一次的单击事件(click)会被屏蔽掉,但第二次不会。也就是说双击事件(dblclick)会返回一次单击事件(click)结果和一次双击事件(dblclick) 结果。而不是一次双击事件(dblclick)结果和两次单击事件结果(click)。

所以可以使用计时的方式去除掉一个多余的单击事件就行了

<script language="javascript">
$(function(){
var TimeFn = null;
$('.testdiv').click(function () {
clearTimeout(TimeFn);
TimeFn = setTimeout(function(){
alert('click')
},300);
});

$('.testdiv').dblclick(function () {
clearTimeout(TimeFn);
alert('dbclick');
})

});
</script>