首頁  >  文章  >  web前端  >  神奇的css属性pointer-events_html/css_WEB-ITnose

神奇的css属性pointer-events_html/css_WEB-ITnose

WBOY
WBOY原創
2016-06-24 11:50:021240瀏覽

绝对定位元素盖住链接或添加某事件handle的元素后,那么该链接的默认行为(页面跳转)或元素事件将不会被触发。
现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性。使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为。如下:

nbsp;html>



CSS:pointer-events

<script><br />window.onload = function(){<br /> document.getElementById('chx').onclick = function(){ document.getElementById('a').className<br /> = "overlay1 " + ((this.checked)? "pointer" : "");<br /> document.getElementById('b').className<br /> = "overlay2 " + ((this.checked)? "pointer" : "");<br /> }<br />}<br /></script>


    

    

    SinaMail
    


    SinaMail
    


        
        
    




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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn