移动端点透问题的处理

1.1 移动端点透问题是啥？
当一个元素放覆盖了另一个元素, 覆盖的元素监听touch事件, 如果被覆盖的元素监听click事件，touch事件触发后覆盖的元素就消失了, 那么就会出现点透问题。

1.2 点透问题的出现原因
① 当手指触摸到屏幕的时候，系统生成两个事件，一个是touch 一个是click
② touch事件先执行，执行完后从文档上消失
③ click事件有100~300ms延迟，所以后执行
④ 但touch事件执行的时候触发的元素已经消失了, 对应的位置现在是下面的元素, 所以就触发了下面元素的click事件。

1.3 移动端点透问题解决方案

① js可以在touch事件中添加event.preventDefault(); 阻止事件扩散。
② 如果是vue可以使用@click.stop取消事件冒泡，@click.prevent阻止默认事件
③ 使用css，可以使用 pointer-events: none;（翻译过来就是指针事件），这是告诉浏览器当前元素不需要接收事件。

1.3.1 事件修饰符

<!-- 阻止单击事件继续传播 -->
<a v-on:click.stop="doThis"></a>

<!-- 提交事件不再重载页面 -->
<form v-on:submit.prevent="onSubmit"></form>

<!-- 修饰符可以串联 -->
<a v-on:click.stop.prevent="doThat"></a>

<!-- 只有修饰符 -->
<form v-on:submit.prevent></form>

<!-- 添加事件监听器时使用事件捕获模式 -->
<!-- 即内部元素触发的事件先在此处理，然后才交由内部元素进行处理 -->
<div v-on:click.capture="doThis">...</div>

<!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
<!-- 即事件不是从内部元素触发的 -->
<div v-on:click.self="doThat">...</div>

<!-- 点击事件将只会触发一次 -->
<a v-on:click.once="doThis"></a>

<!-- 滚动事件的默认行为 (即滚动行为) 将会立即触发 -->
<!-- 而不会等待 `onScroll` 完成  -->
<!-- 这其中包含 `event.preventDefault()` 的情况 -->
<div v-on:scroll.passive="onScroll">...</div>

<!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
<input v-on:keyup.enter="submit">