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 ...
随机推荐
- python学习2---交换两个元素
1.交换两个元素 当然也可以定义一个交换函数:
- linux中mysql配置文件和jdk环境变量
mysql配置文件 [client]default-character-set = utf8mb4 [mysql]socket = /var/lib/mysql/mysql.sockdefault-c ...
- Java面试题2
类加载机制 Java虚拟机把描述类的数据从Class文件加载到内存,并对数据进行校验.转换解析和初始化,最终形成可以被虚拟机直接使用的Java类型,这就是虚拟机的加载机制. 类从被加载到虚拟机内存中开 ...
- socket端口绑定后通过bat干掉
@echo off::port为需要去绑定端口set port=8888for /f "tokens=5 delims= " %%a in ('netstat -ano ^|fin ...
- VS2017 C/C++输入密码显示*星号
VS2017 C/C++输入密码显示*星号 _getch()函数使用时遇到的坑 参考: https://blog.csdn.net/guin_guo/article/details/46237905 ...
- Python读取和写入Excel文件
制作Excel表 常用方法说明 Workbook类 Workbook类创建一个XlswWrite的Workbook对象,相当于创建一个excel表 And_worksheet()用来创建工作表,默认为 ...
- vue对象属性监听
对象属性监听的两种方法: 1.普通的watch data() { return { frontPoints: 0 } }, watch: { frontPoints(newValue, oldValu ...
- virtualenvwrappers pipreqs 踩坑
virtualenvwrappers 1.安装 pip install virtualenvwrapper 在~/.bashrc 中写入 export WORKON_HOME=~/.virtualen ...
- Web前端3.0时代,“程序猿”如何“渡劫升仙”
Web前端入行门槛低,很多人在成为前端工程师后很容易进入工作的舒适区,认为该熟悉的业务已熟悉了,然后就是重复用轮子,这样很容易让自己的成长处于原地打转以及低水平重复的状态. 想要不被行业抛弃,就要努力 ...
- [随笔][Java][总结][java 类型系统]
java 的类型系统大体分为两类,对象和基本类型.java使用静态类型检查来保证类型安全.每个变量在使用之前需要声明.非静态类型的语言不要求变量在使用之前进行声明. 基本数据类型 java的基本类型不 ...