轉載自 鼠標長按事件和移動端長按事件
轉載自 移動端長按事件
<!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()。
