三十三、手機觸屏touch、手勢、重力監聽事件
一、手機觸屏事件
1.常見的觸屏事件：
touchstart:觸控開始時候觸發
touchmove：手指在螢幕上滑動的時候觸發
touchend：觸控結束的時候觸發
touchcancel：當一些更高級別的事件發生的時候（如電話接入或者彈出資訊）會取消當前的touch操作，即觸發ontouchcancel。一般會在ontouchcancel時暫停遊戲、存檔等操作。
2.每個觸控事件包含三個觸控列表，每個列表裡包含了對應的一系列觸控點：
touches:當前位於螢幕上的所有手指的列表；//touches[0]、touches[1]....
targetTouches:位於當前
changedTouches:涉及當前事件手指的列表；
3.每個觸控點(touch物件)包含的觸控資訊:
clientX/clientY:觸控目標在可視視窗中的X/Y座標；
pageX/pageY:觸控目標在頁面中的x/y座標；
screenX/screenY:觸控目標在螢幕中的x/y座標；
identifier:表示觸控的唯一ID;
target:觸控的DOM節點座標；
注意：手機事件新增只能使用監聽新增事件；
例子：觸屏滑動
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{margin: 0;padding: 0;} .block{ width: 100%; height: 300px; border: 1px solid red; overflow: hidden; } </style> </head> <body> <div class="block"></div> <script> //定義座標 var startx=0; var starty=0; var endx=0; var endy=0; var block=document.getElementsByClassName("block")[0]; block.addEventListener("touchstart",function(e){ startx=e.touches[0].pageX; starty=e.touches[0].pageY; }); block.addEventListener("touchmove",function(e){ endx=e.touches[0].pageX; endy=e.touches[0].pageY; }); block.addEventListener("touchend",function(){ if(endx==undefined){ endx=startx; }else{ if(endx-startx>0){ console.log("右") }else{ console.log("左") } } endx=0; }) </script> </body> </html>
二、手勢事件
手勢是指利用多點觸控進行旋轉、拉伸等操作，例如圖片、網頁的放大、旋轉。需要兩個或以上的手指同時觸控時才會觸發手勢事件。
gesturestart:當一個手指按在螢幕上，另一個手指有觸發螢幕時觸發；
gestureend:當任何一個手指從螢幕上移開的時候觸發；
gesturechange:當觸控式螢幕幕的任何一個手指發生變化的時候觸發；
rotation:手指變化引起的旋轉角度，值區間[0,360],順時針為正，逆時針為負；
scale:兩個手指之間的距離變化(小於1是縮小，大於1是放大，原始為1 )；
Eg:
<script>
var block=document.getElementsByClassName("block")[0];
block.addEventListener("gesturechang",function(e){
var scale=e.scale;
var angle=e.rotation;
})
</script>三、利用第三方封裝重力感應事件之旋轉事件
1.orientationchange事件是在使用者水平或垂直翻轉裝置(即每次螢幕方向在橫豎屏間切換後)時觸發的事件；
在此事件中由window.orientation屬性得到代表當前手機方向的數值。
window.orientation值的列表：
0：與頁面首次載入時的方向一致；
-90：相對原始方向順時針旋轉了90度；
180：轉了180度；
90:逆時針轉90度；
Eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;">
<title></title>
<style>
*{margin: 0;padding: 0;}
body[orient=landscape]{
background-color: #ff0000;
}
body[orient=portrait]{
background-color: #00ffff;
}
</style>
</head>
<body orient="landspace">
<div>內容</div>
<script>
(function(){
if(window.orient==0){//未旋轉
document.body.setAttribute("orient","portrait");
}else{
document.body.setAttribute("orient","lanscape");
}
})();
window.onorientationchange=function(){
var body=document.body;//獲取body
var viewport=document.getElementById("viewport");
if(body.getAttribute("orient")=="landscape"){
body.setAttribute("orient","portrait");
}else{
body.setAttribute("orient","landscape")
}
};
</script>
</body>
</html>註釋：
setAttribute() 方法新增指定的屬性，併為其賦指定的值。
如果這個指定的屬性已存在，則僅設定/更改值。
四、重力感應事件 H5自帶事件
1.DeviceMotionEvent事件:提供裝置加速的資訊，表示為定義在裝置上的座標系中的卡爾迪座標。其還提供了裝置在座標系中的自轉速率；
deviceorientation事件：提供裝置物理方向資訊，表示為一系列本地座標系的旋角；
compassneedscalibration 用於通知Web站點使用羅盤資訊校準上述事件。
2.用法
(1)註冊一個devicemotion事件的接收器：
window.addEventListener("devicemotion", function(event) {
// 處理event.acceleration、event.accelerationIncludingGravity、
// event.rotationRate和event.interval
}, true);將裝置放置在水平表面，螢幕向上，acceleration為零，則其accelerationIncludingGravity資訊:{x:0,y:0,z:9.81};
裝置做自由落體，螢幕水平向上，accelerationIncludingGravity為零，則其acceleration資訊：{x:0,y:0,z:-9,81}
將裝置安置於車輛上，螢幕處於一個垂直平面，頂端向上，面向車輛後部。車輛行駛速度為v，向右側進行半徑為r的轉彎。裝置記錄acceleration和accelerationIncludingGravity在位置x處的情況，同時裝置還會記錄rotationRate.gamma的負值:
{acceleration: {x: v^2/r, y: 0, z: 0},
accelerationIncludingGravity: {x: v^2/r, y: 0, z: 9.81},
rotationRate: {alpha: 0, beta: 0, gamma: -v/r*180/pi} };
3.應用案例：手機簡單搖一搖
<script>
if (window.DeviceMotionEvent) {
//新增重力感應處理事件
window.addEventListener('devicemotion',deviceMotionHandler, false);
}
var speed = 30;//speed
var x = y = z = lastX = lastY = lastZ = 0;
//封裝重力感應方法
function deviceMotionHandler(event) {
var acceleration =event.accelerationIncludingGravity;
x = acceleration.x;
y = acceleration.y;
z = acceleration.z;
if(Math.abs(x-lastX) > speed || Math.abs(y-lastY) > speed || Math.abs(z-lastZ) > speed) {//Math.abs()取絕對值
//簡單的搖一搖觸發程式碼
alert(1);
}
////覆蓋上一次搖晃
lastX = x;
lastY = y;
lastZ = z;
}
</script>