在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. Spring Boot相关~

    Introducing Spring Boot Spring Boot makes it easy to create stand-alone, production-grade Spring-bas ...

  2. Python学习笔记,day4

    Python学习第四天 一.装饰器 函数调用顺序: 其他高级语言类似,Python 不允许在函数未声明之前,对其进行引用或者调用 高阶函数: 满足下列条件之一就可成函数为高阶函数 某一函数当做参数传入 ...

  3. centos下源码编译安装MySQL

    解压下载的软件压缩包  tar xzvf mysql-5.1.63.tar.gz 进入解压的目录  cd mysql-5.1.63/ 安装需要的依赖包  yum install gcc gcc-c++ ...

  4. python的面试问题

    WHAT 1. 什么是Python? Python是一种编程语言,它有对象.模块.线程.异常处理和自动内存管理.可以加入与其他语言的对比.下面是回答这一问题的几个关键点: a. Python是一种解释 ...

  5. LeetCode 852. Peak Index in a Mountain Array C++ 解题报告

    852. Peak Index in a Mountain Array -- Easy 方法一:二分查找 int peakIndexInMountainArray(vector<int>& ...

  6. qt+opencv 构建项目时报错——no such file or directory

    构建前,记得,一定一定一定要先点击执行qmake:

  7. RABBITMQ too many heartbeats missed

    执行rabbitmqctl status | grep -A 4 file_descriptors   显示socket_used 达到 socket_limited 的值 增加socket_limi ...

  8. 常用的几个CSS前端效果

    做页面需要一定的CSS基本功,虽然现在有很多成熟的框架如bootstrap等,我们轻松的就就可以做出一些页面效果.但是掌握每一个常见效果的写法还是很重要的,下面整理出一些常见的CSS前端效果,让你更轻 ...

  9. EBS查询在线用户

    转自:https://www.cnblogs.com/benio/archive/2011/03/10/1979417.html SELECT u.user_name, app.application ...

  10. C++ 凸包生成算法

    由于我的极差记忆力,我打算把这个破玩意先记下来.因为以后会有改动(Delaunay三角网生成算法),我不想把一个好的东西改坏了... 好吧-- 凸包生成算法,: 1.先在指定的宽(width)高(he ...