实现多层DIV叠加的js事件穿透
Flash⾥⾯有个很好的特性是,⼀个容器⾥,不存在实际对象的部分,不会阻拦⿏标事件穿透到下⼀层。
前端就不⼀样了,两个div层叠以后,上层div会接收到所有事件(即使这个div⾥⾯内容是空的,没有任何实际对象),下层div什么事件都接不到。
举个例⼦:
javascript的特性这个⽰意图中
C⽅块在A容器中(A容器边框为红⾊)
D⽅块在B容器中(B容器边框为绿⾊)
A B部分重叠,B在上层。
不做任何处理的话,C⽅块永远⽆法被点到,因为B把它盖住了。
下⾯,我将给出⼀种⽅案,在不改变页⾯结构的情况下,让CD都能得到正常相应。
主要利⽤的是css中的pointer-events属性
语法:
pointer-events:auto | none | visiblepainted | visiblefill | visiblestroke | visible | painted | fill | stroke | all
默认值:auto
适⽤于:所有元素
继承性:有
动画性:否
计算值:指定值
取值:
auto:
与pointer-events属性未指定时的表现效果相同。在svg内容上与visiblepainted值相同
none:
元素永远不会成为⿏标事件的target。但是,当其后代元素的pointer-events属性指定其他值时,⿏标事件可以指向后代元素,在这种情况下,⿏标事件将在捕获或冒泡阶触发⽗元素的事件侦听器。
其他值只能应⽤在SVG上。
参考链接:www.css88/book/css/properties/user-interface/pointer-events.htm
注意,这个属性部分旧版浏览器可能不⽀持。
我注意到,设置为none之后,其⼦元素仍然可以通过显式设置auto来响应⿏标事件,那么我们可以将A B容器都设置为none,不响应⿏标事件,同时,将CD显式设置为auto,让他们响应⿏标事件,这样⼀来,B就不会挡住A了,下⾯是具体代码
<!DOCTYPE html>
<html>
<head>
<title>Test position</title>
<style type="text/css">
.a {
position: absolute;
border: solid 1px red;
width: 400px;
height: 400px;
left: 0px;
pointer-events:none;
}
.b {
position: absolute;
border: solid 1px green;
width: 400px;
height: 400px;
left: 200px;
pointer-events:none;
}
.a1 {
position: absolute;
width: 100px;
height: 100px;
background: red;
left: 250px;
top: 50px;
pointer-events:auto;
}
.b1 {
position: absolute;
width: 100px;
height: 100px;
background: green;
left: 50px;
top: 250px;
pointer-events:auto;
}
</style>
</head>
<body>
<div class="a" onclick="onclicka()"> <div class="a1"></div>
</div>
<div class="b" onclick="onclickb()"> <div class="b1"></div>
</div>
<script type="text/javascript">
function onclicka() {
console.log('click a');
}
function onclickb() {
console.log('click b');
}
</script>
</body>
</html>
结果如下:
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论