Heim  >  Artikel  >  Web-Frontend  >  神奇的css属性pointer-events_html/css_WEB-ITnose

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

WBOY
WBOYOriginal
2016-06-24 11:50:021240Durchsuche

绝对定位元素盖住链接或添加某事件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则可以触发相应的行为。

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn