移动端拖拽事件

MDN touch 介绍

手指在屏幕上的操作

rotate 旋转：手指在屏幕上旋转
pan 平移：手指触碰屏幕，移动，最后离开。
click（tap）点击：手指在某个位置范围内进行快速点击。
swipe 快扫：手指在设备上快速移动。
press 按压：手指按下一段时间且不移动。
pinch 缩放：两个（或多个）手指靠近或远离，用于放大缩小。

事件类型

事件规范有三种，分别是 Pointer event (指针事件)、 Mouse event (鼠标事件) 和 Touch event (触摸事件)。指针事件是鼠标与触控交互发展的标准，Pointer 是输入设备层的抽象。

触摸事件：

　　touchstart：触摸开始的时候触发
　　touchmove：手指在屏幕上滑动的时候触发
　　touchend：触摸结束的时候触发

而每个触摸事件都包括了三个触摸列表，每个列表里包含了对应的一系列触摸点（用来实现多点触控）：
　　touches：当前位于屏幕上的所有手指的列表。
　　targetTouches：位于当前DOM元素上手指的列表。
　　changedTouches：涉及当前事件手指的列表。

每个触摸点由包含了如下触摸信息（常用）：
　　pageX/pageY/clientX/clientY/screenX/screenY：一个数值，动作在屏幕上发生的位置（page包含滚动距离,client不包含滚动距离，screen则以屏幕为基准）。
　　radiusX/radiusY/rotationAngle：画出大约相当于手指形状的椭圆形，分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持，好在功能不常用，欢迎大家反馈
　　force: 手指挤压触摸平面的压力大小。从 0.0(没有压力) 到 1.0(设备可识别的最大压力) 的浮点数。
　　identifier：一个数值，相当于编号，唯一标识触摸会话（touch session）中的当前手指。
　　target：DOM元素，是动作所针对的目标。

手机摇一摇示例

禁止页面缩放

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

js 部分

window.onload=function(){
        
    var shakeThreshold = 1000; // 定义一个摇动的阈值
    var lastUpdate = 0; // 记录上一次摇动的时间
    var x, y, z, lastX, lastY, lastZ; // 定义x、y、z记录三个轴的数据以及上一次触发的数据
    // 监听传感器运动事件
    if (window.DeviceMotionEvent) {
        window.addEventListener('devicemotion', deviceMotionHandler,false);
    } else {
        //浏览器不支持DeviceMotion
        alert('天呐，你的手机竟然还不支持摇一摇ヾ(◍°∇°◍)ﾉﾞ');
    }
    // 运动传感器处理
    function deviceMotionHandler(eventData) {
        var acceleration = eventData.accelerationIncludingGravity; // 获取含重力的加速度
        var curTime = new Date().getTime();
        // 100毫秒进行一次位置判断
        if ((curTime - lastUpdate) > 100) {
            var diffTime = curTime - lastUpdate;
            lastUpdate = curTime;
            x = acceleration.x;
            y = acceleration.y;
            z = acceleration.z;
            var speed = Math.abs(x + y + z - lastX - lastY - lastZ) / diffTime * 10000;
            if (speed > shakeThreshold) {
                alert("摇一摇触发")
            }
            lastX = x;
            lastY = y;
            lastZ = z;
        }
    }

}