亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

jQuery實現(xiàn)長按按鈕觸發(fā)事件的方法

 更新時間：2015年02月02日 15:23:59   作者：yongh701  
這篇文章主要介紹了jQuery實現(xiàn)長按按鈕觸發(fā)事件的方法,可應用于手機端應用程序的開發(fā)中,非常具有實用價值,需要的朋友可以參考下

本文實例講述了jQuery實現(xiàn)長按按鈕觸發(fā)事件的方法。分享給大家供大家參考。具體分析如下：

現(xiàn)在手機端的快速發(fā)展，使許多手機手勢需要制作到手機版的網(wǎng)頁過程中

網(wǎng)上有許多長按按鈕的插件，甚至僅僅是jQuery Mobile都有長按事件

但是基于種種的兼容性問題，

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

一、基本目標

制作一個按鈕，實質(zhì)上一個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> 
/*設(shè)置一個長按的計時器，如果點擊這個圖層超過2秒則觸發(fā)，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>

實質(zhì)上，長按的時間不應該過長，因為這有可能與手機系統(tǒng)的部分長按手勢產(chǎn)生沖突，但也不宜過短，因為長按時間過短與點擊沒有任何區(qū)別，

理論上，判斷長按結(jié)束，在手機端上僅設(shè)置mouseup動作就可以，

但是，在PC上僅設(shè)置mouseup會有如下的bug：

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

希望本文所述對大家的jQuery程序設(shè)計有所幫助。

相關(guān)文章

最新評論