移动端事件

移动端基础事件

移动端事件虽然少，可是却能够利用它们来完成不少效果

• 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