移动前端javascript事件
移动端事件：
1 // 手势事件 2 touchstart //当手指接触屏幕时触发 3 touchmove //当已经接触屏幕的手指开始移动后触发 4 touchend //当手指离开屏幕时触发 5 touchcancel 6 7 // 触摸事件 8 gesturestart //当两个手指接触屏幕时触发 9 gesturechange //当两个手指接触屏幕后开始移动时触发 10 gestureend 11 12 // 屏幕旋转事件 13 onorientationchange 14 15 // 检测触摸屏幕的手指何时改变方向 16 orientationchange 17 18 // touch事件支持的相关属性 19 touches 20 targetTouches 21 changedTouches 22 clientX // X coordinate of touch relative to the viewport (excludes scroll offset) 23 clientY // Y coordinate of touch relative to the viewport (excludes scroll offset) 24 screenX // Relative to the screen 25 screenY // Relative to the screen 26 pageX // Relative to the full page (includes scrolling) 27 pageY // Relative to the full page (includes scrolling) 28 target // Node the touch event originated from 29 identifier // An identifying number, unique to each touch event
屏幕旋转事件:
1 // 判断屏幕是否旋转 2 function orientationChange() { 3 switch(window.orientation) { 4 case 0: 5 alert("肖像模式 0,screen-width: " + screen.width + "; screen-height:" + screen.height); 6 break; 7 case -90: 8 alert("左旋 -90,screen-width: " + screen.width + "; screen-height:" + screen.height); 9 break; 10 case 90: 11 alert("右旋 90,screen-width: " + screen.width + "; screen-height:" + screen.height); 12 break; 13 case 180: 14 alert("风景模式 180,screen-width: " + screen.width + "; screen-height:" + screen.height); 15 break; 16 }; 17 }; 18 // 添加事件监听 19 addEventListener('load', function(){ 20 orientationChange(); 21 window.onorientationchange = orientationChange; 22 });
双手指滑动事件：
1 // 双手指滑动事件 2 addEventListener('load', function(){ window.onmousewheel = twoFingerScroll;}, 3 false // 兼容各浏览器，表示在冒泡阶段调用事件处理程序 (true 捕获阶段) 4 ); 5 function twoFingerScroll(ev) { 6 var delta =ev.wheelDelta/120; //对 delta 值进行判断(比如正负) ，而后执行相应操作 7 return true; 8 };
在互联网中，一般用户都是通过鼠标点击、鼠标悬停、鼠标离开等执行一些前端的事件，但是在移动前端，用户却是通过手指来进行操作。从而衍生出移动前端的手势事件。鼠标中的click事件虽然也可以在移动前端进行触发，但这个事件在移动端会有大约半秒中的延迟。所以一般都不采用。
在移动端的手势事件一般有四种情况：
touchstart: 手指放到屏幕上的时候触发
touchmove: 手指在屏幕上移动的时候触发
touchend: 手指从屏幕上拿起的时候触发
touchcancel: 系统取消touch事件的时候触发。 前三者应用很广泛，第四个应用较少。至今所做的项目中，第四项还没涉及过。如果有人用过，可以拿出来分享一下。
一个demo：
1 <!DOCTYPE html> 2 <html> 3 <meta charset="utf-8"/> 4 <meta name="viewport" content="width=480" /> 5 <head> 6 <style> 7 #stage{ 8 width:480px; 9 height:360px; 10 overflow:hidden; 11 background-color: black; 12 } 13 #bg { 14 position:relative; 15 width:480px; 16 height:360px; 17 overflow:hidden; 18 background-color: red; 19 } 20 21 #phone { 22 position:absolute; 23 left:0px; 24 top:0px; 25 } 26 </style> 27 <title>360°旋转</title> 28 </head> 29 <body style="overflow:hidden;padding:0; margin:0;"> 30 <div id="stage"> 31 <div id="bg"> 32 <img id="phone" src="images/360pic1.jpg" /> 33 </div> 34 </div> 35 <span id="toleft">往左转</span> 36 <span id="toright">往右转</span> 37 38 <script type="text/javascript"> 39 var c_i = 1; 40 var c1=new Array(); 41 //创建数组，i的数量是图片的总数；进行for循环。 42 for(var i=1;i<=72;i++){ 43 c1[i]=new Image(); 44 c1[i].src="images/360pic"+i+".jpg"; 45 } 46 47 //定义要360度旋转的对象 48 var main_swipe = document.getElementById_x("phone"); 49 50 //创建滑动的基本距离和滑动方法属性。 51 var defaults = { 52 threshold: { 53 x: 10, 54 y: 30 55 }, 56 swipeLeft: function() {showPicLeft();}, 57 swipeRight: function() {showPicRight();}, 58 }; 59 //定义初始坐标 60 var originalCoord = { x: 0, y: 0 }; 61 var shiftCoord = { x: 0, y: 0 }; 62 var finalCoord = { x: 0, y: 0 }; 63 64 main_swipe.addEventListener("touchstart",function(event) { 65 66 //定义滑动初始时的坐标 67 originalCoord.x = event.targetTouches[0].pageX; 68 originalCoord.y = event.targetTouches[0].pageY; 69 shiftCoord.x = event.targetTouches[0].pageX; 70 shiftCoord.y = event.targetTouches[0].pageY; 71 finalCoord.x = originalCoord.x; 72 finalCoord.y = originalCoord.y; 73 74 }, false); 75 76 main_swipe.addEventListener("touchmove",function(event) { 77 78 //定义滑动中的坐标 79 event.preventDefault(); 80 finalCoord.x = event.targetTouches[0].pageX; 81 finalCoord.y = event.targetTouches[0].pageY; 82 83 //当横向滑动距离大于5时，则判断为有效滑动并执行向左滑动的方法。反之则向向右滑动。 84 if(finalCoord.x - shiftCoord.x > 5){ 85 window.clearInterval(zidongright); 86 window.clearInterval(zidongleft); 87 panduanleft=false; 88 panduanright=false; 89 defaults.swipeLeft(); 90 shiftCoord.x = finalCoord.x; 91 92 }else if(finalCoord.x - shiftCoord.x < -5){ 93 94 window.clearInterval(zidongright); 95 window.clearInterval(zidongleft); 96 panduanleft=false; 97 panduanright=false; 98 defaults.swipeRight(); 99 shiftCoord.x = finalCoord.x; 100 101 } 102 }, false); 103 104 main_swipe.addEventListener("touchend",function(event) { 105 106 var changeY = originalCoord.y - finalCoord.y; 107 108 //滑动结束时，进行坐标判断。并执行向左或是向右的方法 109 if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) { 110 111 changeX = originalCoord.x - finalCoord.x; 112 113 if(changeX > defaults.threshold.x) { 114 window.clearInterval(zidongright); 115 window.clearInterval(zidongleft); 116 panduanleft=false; 117 panduanright=false; 118 defaults.swipeRight(); 119 } 120 121 if(changeX < (defaults.threshold.x*-1)) { 122 window.clearInterval(zidongright); 123 window.clearInterval(zidongleft); 124 panduanleft=false; 125 panduanright=false; 126 defaults.swipeLeft(); 127 } 128 } 129 } 130 , false); 131 132 //向左滑动方法 133 var showPicLeft = function(){ 134 c_i--; 135 if(c_i < 0){ 136 c_i = 72; 137 }; 138 document.getElementById_x("phone").src = c1[c_i].src; 139 } 140 141 //向右滑动方法 142 var showPicRight = function(){ 143 c_i++; 144 if(c_i > 72){ 145 c_i = 1; 146 }; 147 document.getElementById_x("phone").src = c1[c_i].src; 148 } 149 150 var zidongleft; 151 var zidongright; 152 var panduanleft=false; 153 var panduanright=false; 154 155 //添加向左自动滑动功能 156 document.getElementById_x("toleft").addEventListener("touchstart",function(event){ 157 window.clearInterval(zidongright); 158 if(panduanleft==false){ 159 zidongleft=setInterval(function(){defaults.swipeLeft()},50); 160 } 161 panduanleft=true; 162 panduanright=false; 163 },false); 164 165 //添加向右自动滑动功能 166 document.getElementById_x("toright").addEventListener("touchstart",function(event){ 167 window.clearInterval(zidongleft); 168 if(panduanright==false){ 169 zidongright=setInterval(function(){defaults.swipeRight()},50); 170 } 171 panduanright=true; 172 panduanleft=false; 173 },false); 174 175 </script> 176 </body> 177 </html>
代码中，定义了一个元素main_swipe，这个元素就是要进行手势操作的对象。
1 main_swipe.addEventListener("touchstart",function(event) { 2 3 //定义滑动初始时的坐标 4 originalCoord.x = event.targetTouches[0].pageX; 5 originalCoord.y = event.targetTouches[0].pageY; 6 shiftCoord.x = event.targetTouches[0].pageX; 7 shiftCoord.y = event.targetTouches[0].pageY; 8 finalCoord.x = originalCoord.x; 9 finalCoord.y = originalCoord.y; 10 11 }, false); 12 [/run]我们为这个对象添加监听事件，touchstart就是表示当手指刚放到屏幕上就触发，通过event对象我们可以获取当前触摸点的坐标。 13 即event.targetTouches[0].pageX; event.targetTouches[0].pageY; 14 其中event.targetTouches是一个包含触摸数据的数组。其默认的数组第一项就是当前的坐标集合。 15 通过event.targetTouches[0].pageX; event.targetTouches[0].pageY; 16 这样，我们就可以获取到当前触摸点的X和Y坐标。 17 18 接下来我们为了继续获取该元素的触摸移动中的坐标就要添加touchmove的事件。1 19 main_swipe.addEventListener("touchmove",function(event) { 20 21 //定义滑动中的坐标 22 event.preventDefault(); 23 finalCoord.x = event.targetTouches[0].pageX; 24 finalCoord.y = event.targetTouches[0].pageY; 25 26 //当横向滑动距离大于5时，则判断为有效滑动并执行向左滑动的方法。反之则向向右滑动。 27 if(finalCoord.x - shiftCoord.x > 5){ 28 window.clearInterval(zidongright); 29 window.clearInterval(zidongleft); 30 panduanleft=false; 31 panduanright=false; 32 defaults.swipeLeft(); 33 shiftCoord.x = finalCoord.x; 34 35 }else if(finalCoord.x - shiftCoord.x < -5){ 36 37 window.clearInterval(zidongright); 38 window.clearInterval(zidongleft); 39 panduanleft=false; 40 panduanright=false; 41 defaults.swipeRight(); 42 shiftCoord.x = finalCoord.x; 43 44 } 45 }, false);
注意，在获取触摸移动中的坐标的时候，一定要先把浏览器的默认行为禁止 event.preventDefault();
触摸移动中的获取的坐标方法同触摸开始的方法是一样的。这里就不在继续阐述。
通过条件判断，当touchmove时的X坐标大于touchstart时的X坐标，则证明用户向右滑动，反之则向左滑动。
通过这个判断来执行defaults.swipeRight();或是defaults.swipeLeft();。从而实现360°旋转的功能。
当手指离开屏幕时，即touchend。同样要获取离开的坐标，以便为下一次touchstart来进行坐标定义。
1 main_swipe.addEventListener("touchend",function(event) { 2 var changeY = originalCoord.y - finalCoord.y; 3 4 //滑动结束时，进行坐标判断。并执行向左或是向右的方法 5 if(changeY < defaults.threshold.y && changeY > (defaults.threshold.y*-1)) { 6 7 changeX = originalCoord.x - finalCoord.x; 8 9 if(changeX > defaults.threshold.x) { 10 window.clearInterval(zidongright); 11 window.clearInterval(zidongleft); 12 panduanleft=false; 13 panduanright=false; 14 defaults.swipeRight(); 15 } 16 17 if(changeX < (defaults.threshold.x*-1)) { 18 window.clearInterval(zidongright); 19 window.clearInterval(zidongleft); 20 panduanleft=false; 21 panduanright=false; 22 defaults.swipeLeft(); 23 } 24 } 25 } 26 , false);
以上的效果，就是一个典型的touch手势事件的简单应用。手势应用在移动前端应用范围很广。通过实际项目操作来体会其中的用途
