【转】jQuery - 同时添加click和dblclick事件

特别提示：本人博客部分有参考网络其余博客，但均是本人亲手编写过并验证经过。如发现博客有错误，请及时提出以避免误导其余人，谢谢！欢迎转载，但记得标明文章出处： http://www.cnblogs.com/mao2080/

一、问题描述

最近在作H5视频播放器，有这样的需求：点击视频播放界面能够：暂停/播放，双击视频能够：全屏/退出全屏，可是同时绑定click和Dblclick会有冲突，双击的时候每次都会执行两次click，一次Dblclick这明显不符合要求，因而在网上查找解决办法。

二、解决思路

添加事件的代码比较简单，有两种方法：

• $("abc").bind({"click":fn,"dblclick":fn});
• $("abc").click(fn).dblclick(fn)

目前的问题是不管双击或者单击都只执行单击的function，为何呢？
下面咱们说一下双击的机制：

双击(dblclick)的流程是：mousedown，mouseout，click，mousedown，mouseout，click，dblclick；

要想实现双击咱们必须屏蔽这两次click，所以咱们在click里面设置一个定时器，延迟执行function。

三、代码样例

 1 var _time = null;
 2 $(this).find("tr").dblclick(function(e){
 3     clearTimeout(_time);
 4     console.log("dblclick");
 5     //真正双击代码
 6 
 7 }).click(function(e){
 8     clearTimeout(_time);
 9     _time = setTimeout(function(){
10         console.log("click");
11         //单击事件在这里
12 
13     }, 300);
14 });

四、参考网站

http://www.cnblogs.com/huangjacky/archive/2012/09/27/2706110.html