移动端——事件点透

关于事件点透，先上段代码来感受一下。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width"/>
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box{
				position: absolute;
				top: 0;
				left: 0;
				width: 200px;
				height: 200px;
				background: rgba(255,0,0,.4);
			}
		</style>
	</head>
	<body>
		<a href="http://www.baidu.com">度娘</a>
		<a href="http://www.baidu.com">度娘</a>
		<div id="box"></div>
	</body>
	<script type="text/javascript">
		var box = document.getElementById('box');
		var　aNodes = document.querySelectorAll('a');
		
		box.addEventListener('touchstart',function(){
			box.style.display = 'none';
		})	
	</script>
</html>

视图如下：

这段代码要实现的需求是：当点击A区域时，粉色部分消失；

但是实现过程中却发现，点击A时没有任何问题，但是当点击B时，A的粉色部分先消失，随后a这个超链接也会随着跳转。也就说，点击A时，B透过A，跳转到了指定的页面。

由此可以将点透事件通俗的理解为：当A和B在Z轴上重叠且A和B非子类与父类的关系时，我想点上面这层区域，却连下面那层也触发了。

由此可见，点透事件发生的一般场景为：

1、A在B之上，也就是说A的z-index大于B

2、A和B不是子类的关系，如果是的话，就是冒泡的问题了。

3、点透的问题只出现在A和B重叠的部分。

解决方案：

1.meta标签 2.取消浏览器默认行为 3.取消默认样式 4.解决点透

var box = document.getElementById('box');
		var　aNodes = document.querySelectorAll('a');
		
		//1.取消浏览器默认行为
		document.addEventListener('touchstart',function(event){
			event.preventDefault();
		});
		//问题：a不能点击
		
		box.addEventListener('touchstart',function(){
			box.style.display = 'none';
		})
		
		//2.给页面中所有a指定新的跳转地址
		for (var i=0;i<aNodes.length;i++) {
			aNodes[i].addEventListener('touchend',function(){
				window.location.href = this.href;
			});
		}

移动端——事件点透

猜你喜欢