本篇文章给大家带来的内容是关于pointer-events属性是什么？pointer-events属性详解，有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。
绝对定位元素盖住链接或添加某事件handle的元素后，那么该链接的默认行为（页面跳转）或元素事件将不会被触发。
现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性。使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为。如下：
<!DOCTYPE html><html><head><meta charset="utf-8"><title>CSS:pointer-events</title><style type="text/css">.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;}</style><ｓｃｒｉｐｔ type="text/javascript">window.onload = function(){document.getElementById('chx').onclick = function(){ document.getElementById('a').className= "overlay1 " + ((this.checked)? "pointer" : "");document.getElementById('b').className= "overlay2 " + ((this.checked)? "pointer" : "");}}</ｓｃｒｉｐｔ></head><body><p id="a" class="overlay1"></p><p id="b" class="overlay2"></p><a href="http://www.php.cn/">本站</a><br/><br/><span onclick="alert(3);">本站</span><p><input id="chx" type="checkbox"><label for="chx">开启穿透点击</label></p></body></html>显示效果：
默认情况下，链接和span元素被绝对定位的两个p都遮住了。分别点击后无反应，即无法触发链接a的默认行为，无法触发span元素的click事件。但开启穿透点击后支持pointer-events的浏览器Firefox/Safari/Chrome中再次点击链接和span则可以触发相应的行为。
免责声明：本站内容仅用于学习参考，信息和图片素材来源于互联网，如内容侵权与违规，请联系我们进行删除，我们将在三个工作日内处理。联系邮箱：chuangshanghai#qq.com（把#换成@）