html5实现长按弹框效果，可以用于删除

最新推荐文章于 2022-10-26 15:21:43 发布

deduo6614

最新推荐文章于 2022-10-26 15:21:43 发布

阅读量99

点赞数

原文链接：http://www.cnblogs.com/Allen-Wei/p/9338626.html

版权

 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>

转载于:https://www.cnblogs.com/Allen-Wei/p/9338626.html

deduo6614

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html5实现长按弹框效果，可以用于删除

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title></title> 6 <script type="text/javascript" src="http://lib.si...
复制链接

扫一扫