zoukankan html css js c++ java

移动端Touch事件

案例1:

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
 6 <title>Test Tap</title>
 7 <style>
 8     .touchpad{
 9         width: 100%;
10         height: 200px;
11         font-size: 40px;
12         text-align: center;
13         line-height: 200px;
14         background: rgba(0,0,0,0.5);
15         position: relative;
16         color: #ddd;
17     }
18 
19     .ball{
20         display: none;
21         position: absolute;
22         width: 25px;
23         height: 25px;
24         border-radius: 15px;
25         background-color: #7AE6FF;
26         top: 0;
27         left: 0;
28     }
29     p{
30         height: 30px;
31     }
32 
33 </style>
34 </head>
35 <body>
36 
37 <p id="desc"></p>
38 <div id="touchPad" class="touchpad">触摸板</div>
39 <div id="ball" class="ball"></div>
40 
41 <script src="../js/zepto.js"></script>
42 <script type="text/javascript">
43     var touchpad = document.querySelector('#touchPad'),
44         ball = document.querySelector('#ball'),
45         desc = document.querySelector('#desc');
46 
47     //简单的touch事件（废弃）
48     var touchHandler = function(e){
49         var type = e.type;
50 
51 
52         //注意touchend的touches和targetTouches为空，只偶有changeTouches获取上次一的touchTlist
53         if(type != 'touchend'){
54             var pos = {
55                 x : e.touches[0].clientX,
56                 y : e.touches[0].clientY
57             }
58 
59             ball.style.left = pos.x + 'px';
60             ball.style.top = pos.y + 'px';
61             desc.innerHTML = e.type + '(clienX:'+pos.x+', clientY:'+ pos.y+')';
62         }else{
63             desc.innerHTML = e.type ;
64         }
65         
66         switch(type){
67             case 'touchstart':
68                 ball.style.display = 'block'; 
69                 break;
70             case 'touchmove': 
71                 //android的4.4,4.0的bug：只触发touchstart，和一次的touchmove，touchend不触发
72                 //加入evnt.preventDefault
73                 event.preventDefault();
74                 break;
75             case 'touchend': 
76                 ball.style.display = 'none';
77                 break;
78         }
79     }
80 
81     touchpad.addEventListener('touchstart',touchHandler);
82     touchpad.addEventListener('touchmove', touchHandler);
83     touchpad.addEventListener('touchend', touchHandler);
84 
85 
86 </script>
87 
88 </body>
89 </html>

案例2：

  1 <!doctype html>
  2 <html lang="en">
  3 <head>
  4 <meta charset="UTF-8">
  5 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
  6 <title>Test Tap</title>
  7 <style>
  8     .touchpad{
  9         width: 100%;
 10         height: 200px;
 11         font-size: 40px;
 12         text-align: center;
 13         line-height: 200px;
 14         background: rgba(0,0,0,0.5);
 15         position: relative;
 16         color: #ddd;
 17     }
 18 
 19     .ball{
 20         display: none;
 21         position: absolute;
 22         width: 25px;
 23         height: 25px;
 24         border-radius: 15px;
 25         background-color: #7AE6FF;
 26         top: 0;
 27         left: 0;
 28     }
 29     p{
 30         height: 30px;
 31     }
 32 
 33 </style>
 34 </head>
 35 <body>
 36 
 37 <p id="desc"></p>
 38 <div id="touchPad" class="touchpad">触摸板</div>
 39 <div id="ball" class="ball"></div>
 40 
 41 <script src="../js/zepto.js"></script>
 42 <script type="text/javascript">
 43     var touchpad = document.querySelector('#touchPad'),
 44         ball = document.querySelector('#ball'),
 45         desc = document.querySelector('#desc');
 46 
 47 
 48     //获取touch的点(兼容mouse事件)
 49     var getTouchPos = function(e){
 50         var touches = e.touches;
 51         if(touches && touches[0]) {
 52             return { x : touches[0].clientX ,
 53                      y : touches[0].clientY };
 54         }
 55         return { x : e.clientX , y: e.clientY };
 56     }
 57 
 58     //计算两点之间距离
 59     var getDist = function(p1 , p2){
 60         if(!p1 || !p2) return 0;
 61         return Math.sqrt((p1.x - p2.x) * (p1.x - p2.x) + (p1.y - p2.y) * (p1.y - p2.y));
 62     }
 63     //计算两点之间所成角度
 64     var getAngle = function(p1 , p2){
 65         var r = Math.atan2(p2.y - p1.y, p2.x - p1.x);
 66         var a = r * 180 / Math.PI;
 67         return a;
 68     };
 69      //获取swipe的方向
 70     var getSwipeDirection = function(p2,p1){
 71         var dx = p2.x - p1.x;
 72         var dy = -p2.y + p1.y;    
 73         var angle = Math.atan2(dy , dx) * 180 / Math.PI;
 74 
 75         if(angle < 45 && angle > -45) return "right";
 76         if(angle >= 45 && angle < 135) return "top";
 77         if(angle >= 135 || angle < -135) return "left";
 78         if(angle >= -135 && angle <= -45) return "bottom";
 79 
 80     }
 81 
 82 
 83     var startEvtHandler = function(e){
 84         var pos = getTouchPos(e);
 85         ball.style.left = pos.x + 'px';
 86         ball.style.top = pos.y + 'px';
 87         ball.style.display = 'block';
 88 
 89         var touches = e.touches; 
 90         if( !touches || touches.length == 1 ){ //touches为空，代表鼠标点击
 91             point_start = getTouchPos(e);
 92             time_start = Date.now();
 93         }
 94     }
 95 
 96     var moveEvtHandler = function(e){
 97         var pos = getTouchPos(e);
 98         ball.style.left = pos.x + 'px';
 99         ball.style.top = pos.y + 'px';
100 
101 
102         point_end = getTouchPos(e);
103         e.preventDefault();
104     }
105 
106     //touchend的touches和targetTouches没有对象，只有changeTouches才有
107     var endEvtHandler = function(e){
108         ball.style.display = 'none';
109 
110         var time_end = Date.now();
111 
112         //距离和时间都符合
113         if(getDist(point_start,point_end) > SWIPE_DISTANCE && time_start- time_end < SWIPE_TIME){
114            
115            var dir = getSwipeDirection(point_end,point_start);
116            touchPad.innerHTML = 'swipe'+dir;
117         }
118     }
119 
120    
121     var SWIPE_DISTANCE = 30;  //移动30px之后才认为swipe事件
122     var SWIPE_TIME = 500;     //swipe最大经历时间
123     var point_start,
124         point_end,
125         time_start,
126         time_end;
127 
128     //判断是PC或者移动设备
129     var startEvt, moveEvt, endEvt;
130     if("ontouchstart" in window){
131         startEvt="touchstart";
132         moveEvt="touchmove";
133         endEvt="touchend";
134     }else{
135         startEvt="mousedown";
136         moveEvt="mousemove";
137         endEvt="mouseup";            
138     }
139 
140     touchpad.addEventListener(startEvt, startEvtHandler);
141     touchpad.addEventListener(moveEvt, moveEvtHandler);
142     touchpad.addEventListener(endEvt, endEvtHandler);
143 
144 
145 
146 </script>
147 
148 </body>
149 </html>

查看全文

相关阅读:
js 的关键字
 如何理解闭包？
post请求下载文件，获取Content-Disposition文件名
 reactjs踩坑记
 原生js的一些盲点
 js深拷贝
 使用 event.preventDefault() 时报错 Unable to preventDefault inside passive event listener invocation.
vue项目中在index.html里引入css不生效的解决方式
 Do not access Object.prototype method‘hasOwnProperty’ from target object no-prototype-builtins
AJAX详解

原文地址：https://www.cnblogs.com/zhaobao1830/p/7581836.html