神奇的css属性pointer-events

 

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

 

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

 

如下:

 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<title>CSS:pointer-events</title>
<style type="text/css">
	.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>
<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>	

</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 onclick="alert(3);">SPAN element</span>

	<p>
		<input id="chx" type="checkbox">
		<label for="chx">穿透点击</label>
	</p>

</body>
</html>

 

 

相关资源:

https://developer.mozilla.org/en/CSS/pointer-events

 

 

 

你可能感兴趣的:(JavaScript,html,css,IE,chrome)