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>

 

posted @ 2018-07-19 21:47  飞舞的指尖  阅读(653)  评论(0)  编辑  收藏  举报