本文實例講述了jQuery實現長按按鈕觸發事件的方法。分享給大家供大家參考。具體分析如下：
現在手機端的快速發展，使許多手機手勢需要制作到手機版的網頁過程中
網上有許多長按按鈕的插件，甚至僅僅是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程序設計有所幫助。