案例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>
