【jQuery】長按按鈕

標籤：jquery   手機   前端   長按   jquery mobile   

現在手機端的快速發展，使許多手機手勢需要製作到手機版的網頁過程中

網上有許多長按按鈕的外掛程式，甚至僅僅是jQuery Mobile都有長按事件

但是基於種種的相容性問題，

只使用jquery去實現長按動作，可以在手機端與電腦端保持極強的相容性

一、基本目標

製作一個按鈕，實質上一個100x100px的灰色背景的圖層，長按達2s則圖層裡的文字從in變成out。

二、製作過程

代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>無標題文檔</title><script type="text/javascript" src="js/jquery-1.11.1.js"></script></head><body><div id="mydiv" style="width:100px; height:100px; background:#ddd;">out</div></body></html><script>/*設定一個長按的計時器，如果點擊這個圖層超過2秒則觸發，mydiv裡面的文字從out變in的動作*/var timeout ; $("#mydiv").mousedown(function() {    timeout = setTimeout(function() {        $("#mydiv").text("in");    }, 2000);}); $("#mydiv").mouseup(function() {    clearTimeout(timeout);$("#mydiv").text("out");});$("#mydiv").mouseout(function() {    clearTimeout(timeout);$("#mydiv").text("out");});</script>

實質上，長按的時間不應該過長，因為這有可能與手機系統的部分長按手勢產生衝突，但也不宜過短，因為長按時間過短與點擊沒有任何區別，

理論上，判斷長按結束，在手機端上僅設定mouseup動作就可以，

但是，在PC上僅設定mouseup會有如下的bug：

在長按的時候同時塗黑圖層上面的文字，再把滑鼠拖出圖層，則可以躲過系統mouseup的判定，當然，在手機上無法實現這一個動作，如果完全是寫給手機的網頁，完全可以不管這步，不過為了更好的相容性，還是加上mouseout動作修正這個bug。

【jQuery】長按按鈕