关于事件点透,先上段代码来感受一下。
<!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;
});
}