移动端事件

移动端基础事件

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

• 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：触发当前事件的手指列表