移动端事件详解

今天来总结一下移动端事件的用法和注意事项。废话就不多说了，直接上吧！

一、移动端基础事件

1.基础事件

touchstart 手指按下时触发
touchmove 手指移动时触发
touchend 手指抬起时触发

2.使用方法

我们在使用上面三个事件时，要用js 的事件绑定方式去使用（addEventListener()）, JQ 的 on() 等绑定事件不起作用，例如：

var body = document.querySelector("body");
body.addEventListener("touchstart",start);

function start(e) {
  console.log("按下手指");
  console.log(e)
}

3.移动端事件对象

移动端中通过事件对象我们能获取很多信息。比如，手指点击的坐标，手指一动的距离，点击屏幕的手指个数等等。

tocuhes 当前手指触屏的个数

targetTouches 位于当前DOM 元素上的手指的一个列表

changeTocuhes 涉及当前事件的手指的一个列表

clientX 触摸目标在视口中的x坐标

pageX 触摸目标在页面中的x坐标

screenX 触摸目标在屏幕中的x坐标

 <div class="warp"></div>

 var div = document.querySelector(".warp");

div.addEventListener("touchstart",function(e){
   console.log(e)
   div.innerHTML =e.targetTouches.length;
});

如果要获取触摸点的坐标，要这样做：

div.addEventListener("touchstart",function(e){
   var tager = e.touches[0] // 获取第一个触点
   div.innerHTML = tager.pageX;
});

4.注意事项

①使用touchend 可以消除点击事件的300ms 延迟，click 事件是有300ms 延迟的。（可以解决点透问题）

 div.addEventListener("click",click);
 div.addEventListener("touchend",end);

function click() {
  console.log("点击事件")
}

function end() {
   console.log("抬起手指")
}
// 上面结果， end 函数会先触发，click 事件后触发， 

②在ios10下面，user-scalable=no, 禁止用户缩放不起作用，使用阻止pc默认事件就会生效。

document.addEventListener("touchstart",function(e){
   e.preventDefault();
});

③阻止默认事件还会解决IOS10 下使用 overflow:hidden 失效问题

④阻止默认事件还会 禁止系统默认的滚动条，阻止橡皮筋效果

⑤阻止默认事件还会 禁止长按选中文字，选中图片，系统默认菜单。

二、移动端陀螺仪

1.重力感应 （事件是绑定在window 上的）
devicemotion 事件
事件对象（主要）
acceration : 一个包含x,y,z 的属性对象，在不考虑重力的情况下，告诉你在每个方向上的加速度。
accelerationIncludingGravity : 一个包含x,y,z 的属性对象，在考虑z轴自然重力加速度的情况下，告诉你在每个方向上的加速度。
rotationRate : 一个包含表示方向的 alpha、beta 和 gamma属性对象。

    var div = document.querySelector('div');
     window.addEventListener('devicemotion',function(e){
      console.log(e)
        var motion = e.accelerationIncludingGravity;
        var x = motion.x;
        var y = motion.y;
        var z = motion.z; // 安卓显示正直，ios显示负值

        div.innerHTML = "x: " + x;
        div.innerHTML += "<br/>y: " + y;
        div.innerHTML += "<br/>z: " + z;
     })

2.横竖屏检测
orientationchange 事件
其中 window.orientatio 包含了设备横竖屏转动时的几个值：
0：表示肖像模式
90：表示向左旋转的横向模式
-90：表示向右旋转的横向模式

window.addEventListener('orientationchange',function(e){
     alert(window.orientation);
 })

3.检测手机旋转
deviceorientation 事件
事件对象属性：
alpha : 在围绕z轴旋转时，y轴的度数差，是一个介于0到360之间的浮点数
beta : 在围绕x轴旋转时，z轴的度数差，是一个介于-180到180之间的浮点数
gamma : 在围绕y轴旋转时，z轴的度数差，是一个介于-90到90之间的浮点数

 var p = document.querySelector('p');
    window.addEventListener('deviceorientation',function(e){    
       body.innerHTML = "Z: " + e.alpha;  // 手机z轴旋转角度
    })