css穿透点击

最新推荐文章于 2024-05-23 10:42:06 发布

weixin_30593443

最新推荐文章于 2024-05-23 10:42:06 发布

阅读量629

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/xianren/p/5977739.html

版权

css属性pointer-events

这绝对定位元素盖住链接或添加某事件handle的元素后，那么该链接的默认行为（页面跳转）或元素事件将不会被触发。

现在Firefox3.6+/Safari4+/Chrome支持一个称为pointer-events的css属性。使用该属性可以决定是否能穿透绝对定位元素去触发下面元素的某些行为。

如下：

<!DOCTYPE html>
<html>
<head>
　　<meta charset="UTF-8">
　　<title></title>
　　<style>
　　　　.overlay1 {
　　　　　　width:50px;
　　　　　　height:30px;
　　　　　　background:gold;
　　　　　　position:absolute;
　　　　　　top:5px;
　　　　　　left:65px;
　　　　　　opacity:0.5;
　　　　}
　　　　.overlay2 {
　　　　　　width:100px;
　　　　　　height:30px;
　　　　　　background:gold;
　　　　　　position:absolute;
　　　　　　top:60px;
　　　　　　left:25px;
　　　　　　opacity:0.5;
　　　　}
　　　　.pointer{
　　　　　　pointer-events:none;
　　 }
　　</style>
</head>
<body>
　　<div id="a" class="overlay1"></div>
　　<div id="b" class="overlay2"></div>

　　<a href="http://www.baidu.com">Baidu</a>
　　<a href="http://www.baidu.com" "="">Baidu</a>
　　<br/><br/><br/>
　　<span οnclick="alert(3);">SPAN element</span>

　　<p>
　　　　<input id="chx" type="checkbox">
　　　　<label for="chx">穿透点击</label>
　　</p>
<script 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" : "");
　　　　}
　　}
</script>
</body>
</html>

转载于:https://www.cnblogs.com/xianren/p/5977739.html

weixin_30593443

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css穿透点击

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

扫一扫