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 ...
随机推荐
- PA教材提纲 TAW10-2
Unit1 Introduction to the ABAP Dictionary(ABAP字典介绍) 1.1 Describing the ABAP Dictionary(描述ABAP字典) ABA ...
- mysql_函数
MySQL 函数 (http://www.cnblogs.com/chenpi/p/5137178.html) 1.什么是函数 mysql中的函数与存储过程类似,都是一组SQL集: 2.与存储过程的区 ...
- 前端导出功能get和post两种方式
get方式: var url = ’/sjdd/eventQuery/exportSuperviseEventExcel.do?beginDate=' + beginDate + '&endD ...
- 《Java核心技术(卷一)》读书笔记——第六章:内部类
1. 内部类的概念? 类中类 2. 为什么要用内部类? 内部类的方法可以访问外部类的实例域 内部类对外部类的同一个包中的类实现了隐藏 匿名内部类在“想要定义一个回调函数却又不想编写 ...
- routeros DDNS 动态域名更新IP
:local ednsuser "账号":local ednspass "密码":local ednshost "域名":local edn ...
- Python实例之抓取淘宝商品数据(json型数据)并保存为TXT
本实例实现了抓取淘宝网中以‘python’为关键字的搜索结果,经详细查看数据存储于html文档中的js脚本中,数据类型为JSON 具体实现代码如下: import requests import re ...
- 常用的HTML模板(转载)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 多个字符串有相同的hashcode(没见到大于8的时候转成红黑树)
public static void main(String[] a){ byte[] b1 = {33 , 123 ,124}; byte[] b2 = {33 , 124 , 93}; byte[ ...
- Maven 新手入门+命令大全
Maven 是一个项目管理工具,可以对 Java 项目进行构建.依赖管理. Maven 官方文档(English): http://maven.apache.org/index.html Maven ...
- python 基础之变量存储缓存机制与数据驻留小数据池
一:变量存储的缓存机制 在同一文件(模块)里,变量存储的缓存机制 (仅对python3.x版本负责),那么 --对于Number (int bool float complex) 1.对于整型而言,- ...