在jQuery的事件绑定中,执行双击事件(dblclick)时能触发两次单击事件(click)。即一个标签元素(如div等),如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblclick)时却会触发两次单击事件(click)。

  先看一下点击事件的执行顺序:

  单击(click):mousedown,mouseout,click;
  双击(dblclick):mousedown,mouseout,click , mousedown,mouseout,click,dblclick;

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

  如此这般的话,只需消灭掉多余的一次单击事件(click),这个问题就解决了。

  setTimeout 

  在jQuery的$(document).ready(function(){})里面直接开写:

 //定义setTimeout执行方法
var TimeFn = null; $('div').click(function () {
// 取消上次延时未执行的方法
clearTimeout(TimeFn);
//执行延时
TimeFn = setTimeout(function(){
//do function在此处写单击事件要执行的代码
},300);
}); $('div').dblclick(functin () {
// 取消上次延时未执行的方法
clearTimeout(TimeFn);
//双击事件的执行代码
})

  从测试结果来看,如果前后两次点击的时间在 300ms 左右的时候,还是很容易出现 click 和 dblclick 事件被“同时”调用的情况,而如果间隔的时间更短或更长,则只会有 click 或 dblclick 事件。

至此,能一定程度上避免双击(dblclick)时触发单击(click)。

jQuery 双击事件(dblclick)的更多相关文章

  1. jQuery 双击事件(dblclick)时,不触发单击事件(click)

    我这是转载的文字 原文地址:http://www.cnblogs.com/wyblog/archive/2011/12/15/2289219.html 万恶的双击事件啊!! 在jQuery的事件绑定中 ...

  2. [转]jQuery 双击事件(dblclick)时,不触发单击事件(click)

    例1: 链接:http://www.w3school.com.cn/jquery/event_dblclick.asp HTML 系列教程 浏览器脚本 服务器脚本 ASP.NET 教程 XML 系列教 ...

  3. jquery双击事件

    <html> <head><meta http-equiv="Content-Type" content="text/html; chars ...

  4. 学习jQuery的事件dblclick

    Insus.NET一直以来都是asp.net的开发的,少使用javascript.现在学习asp.net mvc了,jQuery是一个必须掌握的客户端语言. 不用急,慢慢来.一步一步.这篇练习jQue ...

  5. jquery双击事件会触发单击事件

    实际工作中,我们经常会遇到在同一个元素上,绑定多种事件类型,比较常见的是单击事件和一些鼠标事件,一般而言影响不大.但是如果同时绑定单击事件和双击事件呢? 其实,只要能够想明白的话,解决方案也比较简单, ...

  6. JQuery如何实现双击事件时不触发单击事件,解决鼠标单双击冲突问题

    在jQuery的事件绑定中,如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblcli ...

  7. jquery 单击和双击事件冲突解决方案

    先看一下点击事件的执行顺序: 单击(click):mousedown,mouseout,click: 双击(dblclick):mousedown,mouseout,click , mousedown ...

  8. JQuery如何实现双击事件时不触发单击事件

    单击和双击事件的执行顺序: 单击(click):mousedown,mouseout,click: 双击(dblclick):mousedown,mouseout,click , mousedown, ...

  9. jQuery的事件

    事件冒泡处理 使用event.stopPropagation();阻止事件冒泡 冒泡事件也可以使用return false来处理 并且 <script type="text/javas ...

随机推荐

  1. Linux系统环境下Tomcat8、httpd、mysql8开机自启动配置

    Linux系统环境下Tomcat8.httpd.mysql8开机自启动配置: 相关命令:chkconfig 参考链接:https://jingyan.baidu.com/article/6525d4b ...

  2. C#实现按键计算器功能2(增强版)

    1.   实验目的 (  1)熟悉C#语言的使用和语法知识 2.   实验要求 (1)设计简单的含交互界面的计算器软件,具有较强的用户体验感. (2)使用C#语言进行编程,创建窗体应用程序. (3)实 ...

  3. Qt学习--信号与槽(多窗口的实现)

    按照helloword的创建过程 创建一个新的项目(项目名:window) 之后进行多窗口的实现过程: (参考:http://www.qter.org/portal.php?mod=view& ...

  4. vscode 最新中文设置

    切换中文 首先看商店里有没有chinese language那个中文插件. 在ctrl + shift +p 搜索configure language,然后配置locale如下即可配置中文.

  5. Codeforces 1105B:Zuhair and Strings(字符串水题)

    time limit per test: 1 second memory limit per test: 256 megabytes input: standard input output: sta ...

  6. 对css语法中position值的理解

    1.static 正常定位,就是默认定位,根据他的top,right,bottom,left的值 2.relative 根据他top,right,bottom,left的值偏移 3.absolute ...

  7. zabbix和iptables的nat表结合使用

    A 机器要去访问C机器,但是无法直接访问到A可以访问到B机器,B机器可以访问到C机器这时候就可以再B机器设置nat,让A机器访问C机器 正好工作中zabbix server要监控2个http地址,缺无 ...

  8. 原生JS实现选中的radio变为未选中

    需求如下,radio已经选中,再点击,取消选中状态. 效果如链接:演示地址 直接上代码: <!DOCTYPE html> <html> <head> <met ...

  9. ASP.NET上传文件到远程服务器(HttpWebRequest)

    /// <summary> /// 文件上传至远程服务器 /// </summary> /// <param name="url">远程服务地址 ...

  10. Redis 单机部署

    参考文章: https://www.cnblogs.com/zy-303/p/10273167.html#_label0 https://blog.csdn.net/linyifan_/article ...