移动端事件

移动端基础事件

移动端事件虽然少，但是却可以利用它们来完成很多效果

• touchstart 手指按下事件，类似mousedown
• touchmove 手指移动事件，类似mousemove
• touchend 手指抬起事件，类似mouseup

注意：移动端事件最好还是使用addEventListener来添加。

移动端事件与PC端事件的区别

触发点的不同

• PC端

  • mousemove 必须在被添加该事件的元素上，不需要鼠标按下就可以触发。
  • mouseup 必须在被添加该事件的元素上抬起，抬起时才能触发。

• 移动端

  • touchmove 按下时，必须在被添加该事件的元素上，但是按下后，即使不在该元素上，也能触发。
  • touchend 即使不在被添加该事件的元素上，抬起时，也能触发。

触发顺序不同

不管添加的顺序如何，事件的触发顺序遵循如下。

• touchstart -> touchend -> mousedown -> click -> mouseup

而且 PC 端事件在移动端约有 300ms的延迟，是为了解决双击才会有这个延迟，如果没有延迟，那么双击链接时，相当于直接单机跳转。

touchstart和click的区别

touchstart是只要手指触碰到元素，就会触发，而click必须是触碰了之后手指抬起才能触发。

移动端事件问题

事件点透

出现事件点透的条件如下

1. 有两层重叠元素
2. 上面的元素带有touch事件，下面的元素带有click事件
3. 上层的元素点击后点击后需要display:none

当满足上面的条件的时候，由于click事件会有延迟，而touch事件会立马触发，所以当点击了上面的元素的时候，会触发下面元素的click事件，这就是事件点透

解决方案

1. 下面的元素不要添加click事件，而且不要使用默认带有click事件的元素，如a、input等
2. 把上面的事件也换成click事件，这样就不会立即触发，都会有延迟，下面的事件就不会触发了
3. 在上层元素的事件中通过event.preventDefault()取消事件的默认动作

取消事件默认动作的作用

往往在实际开发当中，我们不会使用系统提供的一些效果，而是自己通过事件来封装想要的效果，如滑屏等。

所以可以取消根元素的一些默认动作，但是由于在根结点上面阻止默认动作可能会存在一些问题，所以可以把代码放到一个容器中，然后取消这个容器的所有默认动作。代码如下：

const box=document.querySelector('div');
box.addEventListener('touchstart或者touchmove',ev=>{
    ev.preventDefault();    //取消事件的默认动作
});

对于touchstart和touchmove取消它们的默认动作，分别又有不同的效果

1. touchstart

   • 阻止浏览器的滚动条
   • 阻止用户双指缩放

2. touchmove

   • 解决ios10+及部分安卓通过设置viewport禁止用户缩放的功能
   • 解决事件点透问题
   • 阻止图片文字被选中问题
   • 阻止了长按元素会弹出系统菜单
   • 阻止了浏览器回弹效果
   • 阻止了浏览器的滚动条
   • 阻止了鼠标的事件
   • 阻止了input框的输入功能

事件对象

当然和PC端一样，移动端事件也有自己的事件对象，重要的几个属性如下

• touches： 被添加事件元素上必须至少有一根手指，其他手指放不放在该元素上无所谓。表示位于当前屏幕上的所有手指。
• targetTouches：位于当前DOM元素上的手指列表
• changedTouches：触发当前事件的手指列表

其他事件

横竖屏切换事件

使用window.orientation 检测横竖屏，值为下面的

• 0 竖屏（头朝上）
• 180 竖屏（头朝下）
• 90 横屏（头朝左）
• -90 横屏（头朝右）

代码如下:

        window.addEventListener('orientationchange',()=>{
                if(window.orientation==90 || window.orientation==-90){
                    alert('横屏');
                }else if(window.orientation==0 || window.orientation==180){
                    alert('竖屏');
                }
            });

重力加速度事件

监听devicemotion事件，在事件对象中，有下面的一些可用属性
acceleration 设备在X,Y,Z三个轴的方向上移动的距离, 不包含重力加速度

• accelerationIncludingGravity 设备在X,Y,Z三个轴方向移动的距离, 包含重力加速度（重力加速度通常取值为9.8m/s的二次方）

      x轴加速度    以手机屏幕左右两侧为方向移动，往右为正，往左为负
      y轴加速度    以手机屏幕前后两侧为方向移动，往前为正，往后为负
      z轴加速度    以手机屏幕上下两侧为方向移动，往上为正，往下为负
  

• rotationRate 设备在Alpha, Beta, Gamma三个方向旋转的速率（度/秒）

      alpha        以设备坐标系z轴为轴的旋转速率
      beta        以设备坐标系x轴为轴的旋转速率
      gamma        以设备坐标系y轴为轴的旋转速率
  

• interval 从设备获取数据的频率, 单位是毫秒

注意：ios与android里取到的属性值不一致（正负相反），因为它们各自处理坐标的方式不同

对于设备上的方向，可以参考下面这张图:

方向变化事件

监听deviceorientation这个方向变化事件，事件对象当中，有下面几个有用的值

• alpha 设备围绕z轴方向旋转的度数，范围：0~360（顶部指向地球的北极，alpha此时为0）
• beta 设备围绕x轴方向旋转的度数，由前向后，范围：-180~180
• gamma 设备围绕y轴方向旋转的度数，由左向右，范围：-90~90