pointer-events,解决图层被遮挡的问题

avatar 2015年8月25日01:15:42 评论

我们知道,两个层叠在一起,位于下面的层是无法操作的,也就是说,假如下层有个按钮,这个按钮是点击不到的。
如图所示:

前端度
现在有一个新的CSS属性:pointer-events,可以解决这个烦人的问题。目前Firefox3.6+/Safari4+/Chrome等浏览器是支持这个属性的。
使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为。
我们来看一段代码:
CSS部分:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.overlay1 {   
    width:80px;   
    height:20px;   
    background:gold;   
    position:absolute;   
    top:5px;   
    left:5px;   
    opacity:0.5;   
}   
.overlay2 {   
    width:80px;   
    height:20px;   
    background:gold;   
    position:absolute;   
    top:40px;   
    left:5px;   
    opacity:0.5;   
}   
.pointer{pointer-events:none;}  

Javascript部分:

1
2
3
4
5
6
window.onload = function(){   
    document.getElementById('chx').onclick = function(){   
        document.getElementById('a').className = "overlay1 " + ((this.checked)? "pointer" "");   
        document.getElementById('b').className = "overlay2 " + ((this.checked)? "pointer" "");   
    }   

Html部分:

1
2
3
4
5
6
7
8
9
<div id="a" class="overlay1"></div>   
<div id="b" class="overlay2"></div>   
<a href="http://www.qianduandu.com/">qianduandu.com</a>   
   
<span onclick="alert(3);">vqianduan</span>   
<p>   
    <input id="chx" type="checkbox">   
    <label for="chx">开启穿透点击</label>   
</p>  

浏览这个例子可以发现:
默认情况下,链接和span元素被绝对定位的两个div都遮住了。分别点击后无反应,即无法触发链接a的默认行为,无法触发span元素的click事件。
但开启穿透点击后支持 pointer-events 的浏览器 Firefox/Safari/Chrome 中再次点击链接和span则可以触发相应的行为。

  • 我的微信
  • 这是我的微信扫一扫
  • weinxin
  • 我的微信公众号
  • 我的微信公众号扫一扫
  • weinxin
avatar

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: