jQuery實作長按按鈕觸發事件的方法_jquery

本文實例講述了jQuery實作長按按鈕觸發事件的方法。分享給大家供大家參考。具體分析如下：

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

網路上有許多長按按鈕的插件，甚至只是jQuery Mobile都有長按事件

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

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

一、基本目標

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

二、製作過程

程式碼如下：

複製代碼 代碼如下:

 
 
 
 
 
 
 
 
 
 

out

 
 
 
 
<script>  <br /> /*設定一個長按的計時器，如果點擊這個圖層超過2秒則觸發，mydiv裡面的文字從out變in的動作*/  <br /> var timeout ;  <br />    <br /> $("#mydiv").mousedown(function() {  <br />     timeout = setTimeout(function() {  <br />         $("#mydiv").text("in");  <br />     }, 2000);  <br /> });  <br />    <br /> $("#mydiv").mouseup(function() {  <br />     clearTimeout(timeout);  <br />     $("#mydiv").text("out");  <br /> });  <br />   <br /> $("#mydiv").mouseout(function() {  <br />     clearTimeout(timeout);  <br />     $("#mydiv").text("out");  <br /> });  <br />   <br /> </script>

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

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

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

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

希望本文所述對大家的jQuery程式設計有所幫助。