移动端事件

移动端基础事件

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

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

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

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

触发点的不同

  • PC端

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

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

触发顺序不同

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

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

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

touchstartclick的区别

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();    //取消事件的默认动作
});

对于touchstarttouchmove取消它们的默认动作,分别又有不同的效果

  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

你可能感兴趣的:(移动端开发)