【轉】jQuery - 同時添加click和dblclick事件

標籤：target   必須   描述   border   為什麼   流程   log   color   dash   

特別提示：本人部落格部分有參考網路其他部落格，但均是本人親手編寫過並驗證通過。如發現部落格有錯誤，請及時提出以免誤導其他人，謝謝！歡迎轉載，但記得標明文章出處：http://www.cnblogs.com/mao2080/1、問題描述

最近在做H5視頻播放器，有這樣的需求：點擊視頻播放介面可以：暫停/播放，雙擊視頻可以：全屏/退出全屏，但是同時綁定click和Dblclick會有衝突，雙擊的時候每次都會執行兩次click，一次Dblclick這明顯不符合要求，於是在網上尋找解決辦法。

2、解決思路

添加事件的代碼比較簡單，有兩種方法：

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

目前的問題是無論雙擊或者單擊都只執行單擊的function，為什麼呢？
下面我們說一下雙擊的機制：

雙擊(dblclick)的流程是：mousedown，mouseout，click，mousedown，mouseout，click，dblclick；

要想實現雙擊我們必須屏蔽這兩次click，因此我們在click裡面設定一個定時器，順延強制function。

3、代碼範例

 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 });

4、參考網站http://www.cnblogs.com/huangjacky/archive/2012/09/27/2706110.html

【轉】jQuery - 同時添加click和dblclick事件