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 ...
随机推荐
- asdasf
bigFile = open('big.txt',mode='r',encoding='utf-8') bigText = bigFile.read() bigFile.close() print(b ...
- hadoop MapReduce
简单介绍 官方给出的介绍是hadoop MR是一个用于轻松编写以一种可靠的.容错的方式在商业化硬件上的大型集群上并行处理大量数据的应用程序的软件框架. MR任务通常会先把输入的数据集切分成独立的块(可 ...
- admin-7
Admin07 root tmooc 还原三台虚拟机[root@room9pc13 ~]# rht-vmctl reset classroom[root@room9pc13 ~]# rht-vmctl ...
- ssh_exchange_identification: read: Connection reset by peer
vim /etc/hosts.deny 删除ip 借鉴:https://www.sunnyos.com/article-show-81.html
- skimage
它是由python语言编写的, 子模块名称 主要实现功能 io 读取.保存和显示图片或视频 data 提供一些测试图片和样本数据 color 颜色空间变换 filters 图像增强.边缘检测.排序 ...
- IO文件流
定义:流是一种抽象的概念,通过流的方式组成无结构字符和字符序列,从流中取数据的操作进行输入输出.[io流的作用就是用流的方式进行输入输出] 常用语法: 1. 首先引用using.system.io ...
- Mysql逆向工程效率神器之使用IDE自动生成Java实体类
Mysql逆向工程效率神器之使用IDE自动生成Java实体类 简介:实战使用IDE根据Mysql自动生成java pojo实体类 1.IDEA连接数据库 菜单View→Tool Windows→Dat ...
- 虚拟机安装精简版centos7过程
虚拟机配置工作如下所示 1.创建虚拟机 使用键盘组合键CTRL+N2.选择自定义(高级) 如图所示: 3.默认如何所示: 4.选择 稍后安装操作系统 如图所示: 5.选择对应的操作系统 如何所示 6 ...
- Java高级特性 第14节 解析XML文档(2) - SAX 技术
一.SAX解析XML文档 SAX的全称是Simple APIs for XML,也即XML简单应用程序接口.与DOM不同,SAX提供的访问模式是一种顺序模式,这是一种快速读写XML数据的方式.当使用S ...
- C# 每个字节接受 处理串口数据 的方法
/// <summary> /// 向串口发送信息,有返回值 /// </summary> /// <param name="serialPort" ...