移动端的事件点透及原因

div定位在一个a标签上

事件点透解决办法示例

<!DOCTYPE html>
<html lang="en">

<head>
	<meta name="viewport" content="width=device-width,user-scalable=no" />
	<meta charset="UTF-8">
	<title>事件点透</title>
	<style type="text/css">
		#box {
			position: absolute;
			left: 0;
			top: 0;
			 300px;
			height: 100px;
			background: red;
			opacity: 0.5;
		}
	</style>
</head>

<body>
	<a href="http://www.baidu.com">300ms后别触发我click</a>
	<div id="box"></div>
	<script type="text/javascript">
	/*
		移动端支持鼠标事件，但是会有300ms的延迟
		touchend->300ms->click
		事件点透:当我们在屏幕按下时，会直接执行touch事件，然后延迟300ms，在点击的这个坐标点查找元素，如果元素有鼠标事件就执行
		解决：e.preventDefault(); 	
	*/

		var box = document.querySelector('#box');
		box.addEventListener('touchend', function (e) {
			this.style.display = "none";
			//e.preventDefault();
		});

	</script>
</body>

</html>