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

WBOY
Lepaskan: 2016-06-24 11:50:02
asal
1284 orang telah melayarinya

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

sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan