1. 程式人生 > >三十三、手機觸屏touch、手勢、重力監聽事件

三十三、手機觸屏touch、手勢、重力監聽事件

一、手機觸屏事件

1.常見的觸屏事件:

touchstart:觸控開始時候觸發

touchmove:手指在螢幕上滑動的時候觸發

touchend:觸控結束的時候觸發

touchcancel:當一些更高級別的事件發生的時候(如電話接入或者彈出資訊)會取消當前的touch操作,即觸發ontouchcancel。一般會在ontouchcancel時暫停遊戲、存檔等操作。

    2.每個觸控事件包含三個觸控列表,每個列表裡包含了對應的一系列觸控點

touches:當前位於螢幕上的所有手指的列表;//touches[0]touches[1]....

targetTouches:位於當前

DOM元素上手機的列表;

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的轉彎。裝置記錄accelerationaccelerationIncludingGravity在位置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>