本文實例講述了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程式設計有所幫助。
