移動端長按事件


轉載自 鼠標長按事件和移動端長按事件

轉載自 移動端長按事件

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8"/>
	<title></title>
	<script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>
</head>
<body>
<div style="width:100%;">
    <div id="touchArea" style="width:90%; height:200px; background-color:#CCC;font-size:100px">長按我</div> 
</div>
<script>
var timeOutEvent=0;//定時器
$(function(){
	$("#touchArea").on({
        //手指開始按時設置定時器,超過500毫秒就執行longPress()
		touchstart: function(e){
			timeOutEvent = setTimeout("longPress()",500);
		 	e.preventDefault();
		},
       //如果手指滑動只是說明用戶不想長按只想滑動,所以要取消定時器,並還原,
       //如果不還原的話,返回的定時器的值都會是不同的
		touchmove: function(){
            	clearTimeout(timeOutEvent); 
		    	timeOutEvent = 0; 
		},
        //長按沒有超過500毫秒,手指離開,執行點擊事件,取消定時器
		touchend: function(){
	   		clearTimeout(timeOutEvent);
			if(timeOutEvent!=0){ 
                //執行點擊事件的行為
			    alert("你這是點擊,不是長按"); 
			} 
			return false; 
		}
	})
});
 
 
function longPress(){ 
    timeOutEvent = 0; 
   //執行長按事件的行為
    alert("長按事件觸啟動了"); 
} 
 
</script>
</body>
</html>

setTimeout的返回值:

setTimeout(回調函數,時間,參數1,參數2,...)的返回值是整數型數值。返回值的作用,即作為一個引用,指向setTimeout,可以來清除定時器clearTimeout()。

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM