[转]jQuery 双击事件（dblclick）时，不触发单击事件(click)

例1： 链接：http://www.w3school.com.cn/jquery/event_dblclick.asp

HTML 系列教程

浏览器脚本

服务器脚本

ASP.NET 教程

XML 系列教程

Web Services 系列教程

建站手册

jQuery 教程

jQuery 教程

jQuery 简介

jQuery 安装

jQuery 语法

jQuery 选择器

jQuery 事件

jQuery 效果

jQuery 隐藏/显示

jQuery 淡入淡出

jQuery 滑动

jQuery 动画

jQuery stop()

jQuery Callback

jQuery Chaining

jQuery HTML

jQuery 获取

jQuery 设置

jQuery 添加

jQuery 删除

jQuery CSS 类

jQuery css()

jQuery 尺寸

jQuery 遍历

jQuery 遍历

jQuery 祖先

jQuery 后代

jQuery 同胞

jQuery 过滤

jQuery AJAX

jQuery AJAX 简介

jQuery 加载

jQuery Get/Post

jQuery 杂项

jQuery noConflict()

jQuery 实例

jQuery 实例

jQuery 测验

jQuery 参考手册

jQuery 参考手册

jQuery 选择器

jQuery 事件

jQuery 效果

jQuery 文档操作

jQuery 属性操作

jQuery CSS 操作

jQuery Ajax

jQuery 遍历

jQuery 数据

jQuery DOM 元素

jQuery 核心

jQuery 属性

jQuery 事件 - dblclick() 方法

jQuery 事件参考手册

实例

当双击按钮时，隐藏或显示元素：

$("button").dblclick(function(){
$("p").slideToggle();
});

亲自试一试

定义和用法

当双击元素时，会发生 dblclick 事件。

当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。

在很短的时间内发生两次 click，即是一次 double click 事件。

dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数。

提示：如果把 dblclick 和 click 事件应用于同一元素，可能会产生问题。

触发 dblclick 事件

语法

$(selector).dblclick()

亲自试一试

将函数绑定到 dblclick 事件

语法

$(selector).dblclick(function)

参数	描述
function	可选。规定当发生 dblclick 事件时运行的函数。

亲自试一试

jQuery 事件参考手册

例2：

在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)。