HTML5-長按事件

時間  2019-12-06
標籤 html5 html 事件 欄目 HTML5 简体版
原文   原文鏈接
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>   
  4.     <meta charset="utf-8"/>  
  5.     <title></title>  
  6.     <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script>  
  7. </head>  
  8. <body>  
  9. <div style="width:100%;">  
  10.     <div id="touchArea" style="width:90%; height:200px; background-color:#CCC;font-size:100px">長按我</div>   
  11. </div>  
  12. <script>  
  13. var timeOutEvent=0;  
  14. $(function(){  
  15.     $("#touchArea").on({  
  16.         touchstart: function(e){  
  17.             timeOutEvent = setTimeout("longPress()",500);  
  18.             e.preventDefault();  
  19.         },  
  20.         touchmove: function(){  
  21.                     clearTimeout(timeOutEvent);   
  22.                 timeOutEvent = 0;   
  23.         },  
  24.         touchend: function(){  
  25.             clearTimeout(timeOutEvent);  
  26.             if(timeOutEvent!=0){   
  27.                 alert("你這是點擊，不是長按");   
  28.             }   
  29.             return false;   
  30.         }  
  31.     })  
  32. });  
  33.   
  34.    
  35. function longPress(){   
  36.     timeOutEvent = 0;   
  37.     alert("長按事件觸發發");   
  38. }   
  39.   
  40. </script>  
  41. </body>  
  42. </html>  
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程