三十三、手机触屏touch、手势、重力监听事件

一、手机触屏事件

1.常见的触屏事件：

touchstart:触摸开始时候触发

touchmove：手指在屏幕上滑动的时候触发

touchend：触摸结束的时候触发

touchcancel：当一些更高级别的事件发生的时候（如电话接入或者弹出信息）会取消当前的touch操作，即触发ontouchcancel。一般会在ontouchcancel时暂停游戏、存档等操作。

2.每个触摸事件包含三个触摸列表，每个列表里包含了对应的一系列触摸点：

touches:当前位于屏幕上的所有手指的列表；//touches[0]、touches[1]....

targetTouches:位于当前DOM元素上手机的列表；

changedTouches:涉及当前事件手指的列表；

扫描二维码关注公众号，回复： 4528918 查看本文章

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>

三十三、手机触屏touch、手势、重力监听事件

猜你喜欢