什么是移动端的事件点透

情景

---

我们将会写一下代码

.box{
	position: absolute;
	width: 200px;
	height: 200px;
	background-color: red;
	opacity: 0.5;
}

<div class="box"></div>
<!-- 注意加上http前缀 -->
<a href="http://www.baidu.com">点我一下，看我跳不跳转</a>

当我们把上面的代码写好，去点击的时候，我们会发现他并不跳转，因为盒子遮挡了a标签的点击

点击隐藏盒子

---

移动端事件

const box = document.querySelector('.box')
addEventListener('touchstart',function(){
	box.style.display = 'none'
})

当我们使用JS代码将点击的盒子隐藏掉的时候，我们再测试，我们会发现在隐藏掉盒子的同时，直接出发了a标签的跳转，无论我们点击的有多快，依旧会触发a标签，事件穿过盒子直接触发跳转事件

PC端事件

当我们把代码中的touchstart换为PC端的click,进行测试

const box = document.querySelector('.box')
addEventListener('click',function(){
	box.style.display = 'none'
})

• 我们会发现，单击他只是隐藏掉了上面的盒子，并没有触发a标签的跳转事件

根本原因

---

• 移动端事件点透的根本原因是PC端事件在移动端有300ms的延迟
• 因为PC端事件较多，他需要等300ms来判断，如是点击事件还是双击事件

对于上面情况的解释

• 移动端touchstart的事件，没有延迟，当我们点击的时候，隐藏掉盒子的同时，直接触发了a标签
• 而PC端click事件有点击之后300ms的延迟，直接组织了点击事件向a标签的传递