標籤：doc utf-8 span 使用者 body ref log sheet viewport
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>長按</title> <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" /> <meta name="apple-touch-fullscreen" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes" /> {{!-- <link href="css/travelstyle.css" rel="stylesheet" type="text/css" /> --!}} </head> <body id="body_id" > <div style="width:100%;"> <div style="width:100%; height:100px; background-color:#CCC;" ontouchstart="gtouchstart()" ontouchmove="gtouchmove()" ontouchend="gtouchend()">長按我</div> </div> <script> var timeOutEvent=0;//定時器 //開始按 function gtouchstart(){ timeOutEvent = setTimeout("longPress()",500);//這裡設定定時器，定義長按500毫秒觸發長按事件，時間可以自己改，個人感覺500毫秒非常合適 return false; }; //手釋放，如果在500毫秒內就釋放，則取消長按事件，此時可以執行onclick應該執行的事件 function gtouchend(){ clearTimeout(timeOutEvent);//清除定時器 if(timeOutEvent!=0){ //這裡寫要執行的內容（尤如onclick事件） alert("你這是點擊，不是長按"); } return false; }; //如果手指有移動，則取消所有事件，此時說明使用者只是要移動而不是長按 function gtouchmove(){ clearTimeout(timeOutEvent);//清除定時器 timeOutEvent = 0; alert(‘移動了‘) }; //真正長按後應該執行的內容 function longPress(){ timeOutEvent = 0; //執行長按要執行的內容，如快顯功能表 alert("長按事件觸發發"); } </script> </body> </html>
在移動端實現常按事件
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
