移动端中的事件-JXin的博客

温馨提示

该文章距离上次更新已经过去了 999 天，文章内容可能已经过时。

移动端有哪些事件？
事件对象
移动端事件和PC端事件的区别
移动端的事件穿透

移动端有哪些事件？

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

例如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      div {
        width: 300px;
        height: 300px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script>
      const box = document.getElementsByTagName("div")[0];
      box.addEventListener("touchstart", () => {
        console.log("手指按下");
      });
      box.addEventListener("touchmove", () => {
        console.log("手指移动");
      });
      box.addEventListener("touchend", () => {
        console.log("手指抬起");
      });
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

事件对象

和PC端一样，移动端的事件中也有事件对象，通过事件对象，我们可以获取到一些更加具体的信息。例如：

box.addEventListener("touchstart", (e) => {
	console.log(e);
});

1
2
3

移动端事件对象

其中有3个是比较常用也是比较重要的：

changedTouches：触发当前事件的手指列表，也就是引发当前事件的触摸点列表
targetTouches：位于当前DOM元素上的手指列表，也就是当前对象上所有触摸点的列表
touches：位于当前屏幕上的所有手指列表，也就是当前屏幕上所有触摸点的列表

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

在移动端中，虽然也能使用PC端的事件，但是尽量还是要使用移动端的事件，因为PC端的事件并不是为移动端设计的，因此会存在很多问题，例如移动端中300ms延迟的问题。除此之外，移动端和PC端还存在一些区别：

触发点区别
- mousemove：不需要鼠标按下，但是必需在元素上才能触发
- mouseup：必须在元素上抬起才能触发
- touchmove：必需手指按下才能触发，但是按下之后不在元素上也能触发
- touchend：不需要在元素上抬起就能触发
触发顺序区别
- 触发顺序：touchstart -> touchend -> mousedown -> click -> mouseup
- pc端的事件在移动端中会有300ms的延迟
touchstart和click的区别
- touchstart是手指碰到元素就触发，click是手指碰到元素并且抬起后才触发

移动端的事件穿透

移动端的事件穿透是一个很有名的Bug，指的是当一个在上层的元素被点击后消失，位于该元素点击的位置的下层的元素也会被点击，例如：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"
    />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>事件穿透</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      :root,
      body {
        position: relative;
      }
      .wrap {
        width: 200px;
        height: 200px;
        background-color: rgba(0, 255, 255, 0.3);
        position: absolute;
        top: 0;
      }
    </style>
  </head>
  <body>
    <a href="https://www.baidu.com">百度</a>
    <div class="wrap"></div>
    <script>
      const wrap = document.querySelector(".wrap");
      wrap.addEventListener("touchstart", () => {
        wrap.style.display = "none";
      });
    </script>
  </body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

移动端的事件穿透

可以看到上层元素消失之后下层元素又被点击跳转到了百度

为什么会出现事件穿透？

出现事件穿透的原因就是因为移动端300ms延迟的问题，移动端的执行顺序是 touchstart -> touchend -> click ，当touchstart事件把上层的元素隐藏之后，隔了300ms，click事件触发了，但是这个时候上层的元素已经消失了，所以事件会被派发到下层的元素身上，这时候下层元素的事件就会被触发

如何解决事件穿透？

fastclick.js：fastclick是一个专门解决移动端300ms延迟和事件穿透的轻量级库

<script src="./fastclick.js"></script>
<script>
	if ("addEventListener" in document) {
		document.addEventListener(
			"DOMContentLoaded",
			function () {
				FastClick.attach(document.body);
			},
			false
		);
	}
</script>

1
2
3
4
5
6
7
8
9
10
11
12

可以通过取消事件的默认行为来解决

box.addEventListener("touchstart", (e) => {
	e.preventDefault();
});

1
2
3

虽然 e.preventDefault() 阻止了默认行为，但是同时也阻止的浏览器中的一些默认行为，例如：

阻止图片文字被选中
阻止长按元素弹出系统菜单
阻止浏览器回弹效果
阻止了浏览器的滚动条
阻止了鼠标的事件
阻止了input框的输入功能

实际上，在移动端开发的时候，一上来就要阻止所有默认的事件，后面的功能都需要自己来实现
3. 延迟上层元素的消失，让上层元素延迟350ms后再消失，可以先设置透明度为0
4. 使用CSS3中的属性——pointer-events

const wrap = document.querySelector(".wrap");
const aTag = document.querySelector(".a");
wrap.addEventListener("touchstart", (e) => {
	aTag.style.pointerEvents = "none";
	wrap.style.display = "none";
	setTimeout(() => {
		aTag.style.pointerEvents = "auto";
	}, 300);
});

1
2
3
4
5
6
7
8
9

先让 pointer-events 为none，这样a标签就无法被点击，300ms过后再恢复