解决jQuery中dbclick事件触发两次click事件

首先感谢这位小哥!http://qubernet.blog.163.com/blog/static/1779472842011101505853216/

太长姿势了。

在jQuery事件绑定中,dbclick可以触发两次click事件。例如一个DOM元素div,既绑定了 click 事件,又绑定了
dblclick 事件,这两个事件分别要做独立的事情。事件处理上没有冲突,都可以各自完成各自的操作。双击的时候虽然是执行了 dblclick
事件,但是在这之前,也执行了click 事件,那么,如何来禁止或者说屏蔽这次多余的 click 事件呢?本文将提供给您一个比较好的解决办法。

产生原理分析
  首先,来了解一下点击事件发生的先后顺序:

单击:mousedown, mouseup, click
双击:mousedown, mouseup, click, mousedown,
mouseup, click, dblclick
  由此看来,dblclick 事件发生之前,实际上发生了两次 click 事件。其中,第一次的
click 是会被屏蔽掉,但是第二次则不会,所以就出现在双击的时候,也触发 click 事件。

解决办法
  知道了原因,接下来自然就是想办法把这次 click
给屏蔽掉,但是由于各浏览器均未提供直接去停止事件的方法,所以值得改变思路。
   由于我们只需要屏蔽一次 click 事件即可,由此联想到,可以利用
setTimeout() 方法来延时完成 click 事件的处理,在需要停止 click 的时候利用 clearTimeout()
方法停止这一事件的处理。这样,就可以比较容易的写出如下的 javascript 代码:

var timer = null; function do_click(event) {
 clearTimeout(timer); //
这里加一句是为了兼容 Gecko 的浏览器 /
if (event.detail == 2)
return ;
// 同上句的作用

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

function do_dblclick(event) {
clearTimeout(timer);
 // dblclick
事件的处理
}

问题总结
  从测试结果来看,如果前后两次点击的时间在 300ms 左右的时候,还是很容易出现 click 和 dblclick
事件被“同时”调用的情况,而如果间隔的时间更短或更长,则只会有 click 或 dblclick 事件。
  所以,应该说这个方法已经在很大程度上,避免了
click 和 dblclick 事件的“同时”存在问题。当然,它还没有达到完全解决的程度。

注意
    windows 的控制面板里是可以调鼠标的双击速度的(Linux
等系统下能不能调,俺就不清楚了),这点对于程序还是有一定影响,大家可以自己调节下试试看~
经过测试,延时 300ms
是一个比较理想的事件,既考虑到对鼠标操作并不十分顺利的朋友,也兼顾 click 事件的响应速度

以上代码,只在 IE6、FF3、Chrome 中测试过,并未出现问题

w3c标准是没有dblclick的,而是通过event.detail来判断是单击或双击

**********************************************************************

**********************************************************************

《判断是否双击》


<input type="button" onclick="OneClick()" ondblclick="TwoClick()" value="点我">
<script language="javascript">
var v_Result;
function OneClick() {
v_Result = false;
window.setTimeout(OneClick_Nei, 500)
function OneClick_Nei() {
if (v_Result != false) return;
alert("单击");
}
}
function TwoClick() {
v_Result = true;
alert("双击");
}
</script>

解决jQuery中dbclick事件触发两次click事件

时间: 2024-12-26 04:26:27

解决jQuery中dbclick事件触发两次click事件的相关文章

解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法

解决jquery中动态新增的元素节点无法触发事件的问题有两种解决方法,如下: 为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码: ? 1 2 3 4 5 6 7 8 9 10 11 <p id="pLabel">新加一条</p> <ul id="ulLabel">  <li class="liLabel">aaa1</li>  <li class="li

解决jQuery ajax动态新增节点无法触发点击事件的问题

在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="",但是这样写其实是有点low的,最好的方式还是通过给类名绑定一个click事件. 解决jQuery ajax动态新增节点无法触发事件问题的两种解决方法,为了达到更好的演示效果,假设在某个页面的body下有以下结构的代码: 1 <ul id="demo"> 2 <li c

Fastclick 导致click事件触发两次的问题

我在移动web上使用Fastclick这个库去解决300ms延迟问题,但是在安卓4.2下的webview中引发了另一个比较奇怪的bug. 在A页面中有个 a button,在B页面中有个 b button,a和b都在同一个position,给a和b都注册一个click事件.a的click事件触发后跳转到B页面.当a被点击后调到B页面,你会发现b按钮的click事件也被触发了. 没错,事件'穿透'了两个页面! 但其实并没有穿透,点击a按钮时,其实有如下两个动作: fastclick用touchst

Fastclick 导致click事件触发两次的问题,fastclickclick

文章原文csdn链接:www.foreverpx.cn 我在移动web上使用Fastclick这个库去解决300ms延迟问题,但是在安卓4.2下的webview中引发了另一个比较奇怪的bug. 在A页面中有个 a button,在B页面中有个 b button,a和b都在同一个position,给a和b都注册一个click事件.a的click事件触发后跳转到B页面.当a被点击后调到B页面,你会发现b按钮的click事件也被触发了. 没错,事件‘穿透’了两个页面! 但其实并没有穿透,点击a按钮时,

input text onclick 事件触发两次

在输入框<input type="text">中添加onclick事件,当点击该文本框时,执行两次click事件.解决方法:设置readonly属性为readonly: 如:<input type="text" id="startDate" readonly="readonly" name="startDate" size="10" onclick="show

jQuery中animate动画第二次点击事件没反应

jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page").stop().animate({top:“-300px”}, 800, 'easeInOutExpo'); 第二次点击事件动画没反应的原因:top是page元素顶部相与其父元素顶部的距离,第一次点击后,page元素顶部已经移动到距其父元素顶部 -300px的位置,第二次点击时的并不是page在

解决Jquery对input file控件的onchange事件只生效一次的问题

如题,解决办法的代码如下: 1. $('#fileId').live('change',function(){ //逻辑添加.... }); 2. $('#fileId').change(function(){ $('#inputFileID').replaceWith('<input name="fileToUpload" type="file" id="inputFileID" />'); }); 解决Jquery对input f

关于jQuery中动态生成的点击事件触发两次的讨论

由于是动态生成的  点击事件运用了jQuery里面的on()方法,绑定在body上面,结果在程序里面运行了两次.参考了博客 利用on和off方法编写高效的js代码知道了很多在dom对象删除以后,其声明的绑定在window上的事件还一直存在,导致相同的功能代码执行了几次.故使用之前要清理掉body上绑定的click事件,利用了jQuery里面off()方法. $('body').off('click').on('click','selector',function(){});

解决label点击事件触发两次问题

问题描述: 通常,为了用户体验,我们点击单选框或者复选框后面文字,即可选中当前项.代码如下: <label> <input type="radio" name="sex" />男 </label> <label> <input type="radio" name="sex" />女 </label> 但是,此时,如果label标签有点击事件,则会触发两次.