jQuery 双击事件(dblclick)
在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)的更多相关文章
- jQuery 双击事件(dblclick)时,不触发单击事件(click)
我这是转载的文字 原文地址:http://www.cnblogs.com/wyblog/archive/2011/12/15/2289219.html 万恶的双击事件啊!! 在jQuery的事件绑定中 ...
- [转]jQuery 双击事件(dblclick)时,不触发单击事件(click)
例1: 链接:http://www.w3school.com.cn/jquery/event_dblclick.asp HTML 系列教程 浏览器脚本 服务器脚本 ASP.NET 教程 XML 系列教 ...
- jquery双击事件
<html> <head><meta http-equiv="Content-Type" content="text/html; chars ...
- 学习jQuery的事件dblclick
Insus.NET一直以来都是asp.net的开发的,少使用javascript.现在学习asp.net mvc了,jQuery是一个必须掌握的客户端语言. 不用急,慢慢来.一步一步.这篇练习jQue ...
- jquery双击事件会触发单击事件
实际工作中,我们经常会遇到在同一个元素上,绑定多种事件类型,比较常见的是单击事件和一些鼠标事件,一般而言影响不大.但是如果同时绑定单击事件和双击事件呢? 其实,只要能够想明白的话,解决方案也比较简单, ...
- JQuery如何实现双击事件时不触发单击事件,解决鼠标单双击冲突问题
在jQuery的事件绑定中,如果元素同时绑定了单击事件(click)和双击事件(dblclick),那么执行单击事件(click)时,不会触发双击事件(dblclick), 执行双击事件(dblcli ...
- jquery 单击和双击事件冲突解决方案
先看一下点击事件的执行顺序: 单击(click):mousedown,mouseout,click: 双击(dblclick):mousedown,mouseout,click , mousedown ...
- JQuery如何实现双击事件时不触发单击事件
单击和双击事件的执行顺序: 单击(click):mousedown,mouseout,click: 双击(dblclick):mousedown,mouseout,click , mousedown, ...
- jQuery的事件
事件冒泡处理 使用event.stopPropagation();阻止事件冒泡 冒泡事件也可以使用return false来处理 并且 <script type="text/javas ...
随机推荐
- ajango--orm操作
一 必知必会13条: 返回对象列表的: 1.all() :查所有 2.filter() :查一行 3.exclude():排除(里面可以写条件,意思除了这个条件的所有) 4.order_by():默认 ...
- 20164322韩玉婷 -----Exp2 后门原理和实践
一.后门的概念 后门是指那些绕过安全性控制而获取对系统访问权的程序 二.基础问题回答 (1)例举你能想到的一个后门进入到你系统中的可能方式? 非官方网站下载应用程序时,该应用程序可能绑定了 ...
- JS处理日期&字符串格式相互转换
之前找过一些获取系统日期以及日期&字符串格式相互转换的方式,但总体自我感觉来说还是以下的方式会更适合一些. 如有更好的方式,望大家多多赐教和交流,谢谢! 2016年曾写过一次,不过只是发了一下 ...
- centos7使用cronolog分割tomcat8.5的catalina.out日志
1.安装cronolog wget https://files.cnblogs.com/files/crazyzero/cronolog-1.6.2.tar.gz tar -zxvf cronolog ...
- Unity 常用插件1
作者:Meta42链接:https://www.zhihu.com/question/29097415/answer/229015898来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转 ...
- bootstrap实现列的拖动
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"& ...
- Linux之prink原理
我的分析是基于Linux4.15.1 1.看看kernel是如何调用到console初始化函数的: 分两条线: a.start_kernel --> console_init --> ...
- VUE路由携带参数的三种方式
vue 通过路由在进行页面跳转时,会经常携带参数用于同步页面间的数据 路由中携带参数的方式总结如下: 路由定义示例: { name: 'list', path: '/list', component: ...
- 加载Excel时,如何过滤空行空列
巨硬为Excel提供了丰富的C#接口,基本上可以将Excel当做一个微型数据库来用,奈何前端的我们,sql也只会写两句select * from table: 目前工作中遇到了一个问题,在需要读取的E ...
- 保卫"木叶",从火影剧情看网站攻防的演变
精彩故事即将上演,敬请期待 一.下忍考试 关键词:内鬼.已知攻击.后门 二.佩恩入侵 关键词:未知攻击.零日漏洞 三.忍界大战 关键词:CC攻击.批量注册.模拟攻击 -- 时间过去很久,火影篇太多情节 ...