首先感谢这位小哥!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事件的更多相关文章

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

    在写ajax加载数据的时候发现,后面添加进来的demo节点元素,失去了之前的点击事件.为什么点击事件失效,我们该怎么去解决呢? 其实最简单的方法就是直接在标签中写onclick="" ...

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

    jQuery中animate动画第二次点击事件没反应 用animate做点击翻页动画时发现第二次点击事件动画没反应,而第一次点击有动画效果,代码如下: 复制代码 代码如下: $(".page ...

  3. jQuery中开发插件的两种方式

    jQuery中开发插件的两种方式(附Demo) 做web开发的基本上都会用到jQuery,jQuery插件开发两种方式:一种是类扩展的方式开发插件,jQuery添加新的全局函数(jQuery的全局函数 ...

  4. IScroll中div点击事件触发两次解决办法

    1.网上的同学说的,直接修改源代码,但是这种方法可能会影响到现有的程序. 搜索onBeforeScrollStart方法,将其中的preventDefault禁止掉搜索_end方法,将其中模拟clic ...

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

    问题描述: 通常,为了用户体验,我们点击单选框或者复选框后面文字,即可选中当前项.代码如下: <label> <input type="radio" name=& ...

  6. jquery触发两次onchange事件

    在项目中需要给select绑定改变事件,来触发动作,但是发现改变一次select,onchange方法执行两遍 //这是那个标签,用的是我们公司内部的selectlist <select cla ...

  7. Angular JS中双击事件ng-dblclick避免同时触发两次单击事件ng-click的解决方案

    有些需求中,需要一个元素上既有双击事件,也有单击事件,而两者实现的效果不一样. 这时可以使用ng-dblclick与ng-click来实现需求,但是要避免浏览器将双击事件误认为是两次单击事件,从而出现 ...

  8. 解决Jquery中click里面包含click事件,出现重复执行的问题

    出现问题的代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.o ...

  9. 在JS/jQuery中,怎么触发input的keypress/keydown/keyup事件?

    怎么触发keypress/keydown/keyup事件? 问题: 1.在之前的写的input后面添加了搜索按钮 2.input只有keyup事件,如下: $("#desktop_folde ...

随机推荐

  1. ubuntu 下使用mysql

    第一步:安装mysql apt-get install mysql-server 第二步:设置允许远程登录 修改/etc/mysql/my.cnf(此文件为mysql的配置文件).将文件中的bindi ...

  2. lunix安装jdk(rpm格式)

    1.下载后,首先把jdk-7u3-linux-x64.rpm复制到/usr/local/src#cp jdk-7u3-linux-x64.rpm /usr/local/src/2.给所有用户添加可执行 ...

  3. Hdu1092

    #include <stdio.h> int main() { ; while(scanf("%d",&n)){ ) {;} else{ int i,a; ;i ...

  4. [C入门 - 游戏编程系列] 贪吃蛇篇(二) - 食物定义

    游戏中的食物没有那么多复杂属性,特别是贪吃蛇游戏中,我把食物看待的很简单: 1. 它必须属于世界,才能出现在世界.不可能一个不属于世界的食物,出现在世界中:但是可能存在着一个食物,它属于世界,但是却没 ...

  5. 递归实现全排列序列C语言实现

    大家好,我是小鸭酱,博客地址为:http://www.cnblogs.com/xiaoyajiang 以下鄙人用递归回溯的办法,采用C语言实现了全排列序列,用以某些优化方案的原始方案的给定 #incl ...

  6. AOI

    AOI(Automatic Optic Inspection)的全称是自动光学检测,是基于光学原理来对焊接生产中遇到的常见缺陷进行检测的设备.AOI是新兴起的一种新型测试技术,但发展迅速,很多厂家都推 ...

  7. HttpStatusCode 枚举

    .NET Framework 类库 HttpStatusCode 枚举 包含为 HTTP 定义的状态代码的值. 命名空间:System.Net程序集:System(在 system.dll 中)   ...

  8. Linux下编译第三方库的问题

    因为各个Linux发行版之间的差异还是挺大的,有一些预安装在系统上的基本库是不一样的(不仅仅是版本,有一些是有和无的区别). 那么问题来了: 编译第三方库./configure的时候一般我们不会定制那 ...

  9. 图解SSL/TLS协议(转)

    本周,CloudFlare宣布,开始提供Keyless服务,即你把网站放到它们的CDN上,不用提供自己的私钥,也能使用SSL加密链接. 我看了CloudFlare的说明(这里和这里),突然意识到这是绝 ...

  10. Hdu1401-Solitaire(双向bfs)

    Solitaire is a game played on a chessboard 8x8. The rows and columns of the chessboard are numbered ...