【轉】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