绝对定位元素盖住链接或添加某事件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
分享到：
相关推荐
**CSS的pointer-events属性详解** 在现代Web开发中，CSS的功能越来越强大，有时甚至与JavaScript的功能界限变得模糊。`pointer-events`属性就是这样一个例子，它允许开发者通过CSS控制元素对鼠标交互的响应，从而...
当pointer-events的值设置为none之后,浏览器将不会获得鼠标在当前位置的层上的点击事件,而造成鼠标穿透的效果!下面就来为大家展开讲解一下使用CSS的pointer-events属性实现鼠标穿透效果的神奇技巧
在CSS中，`pointer-events`属性是一个非常实用的特性，它允许开发者控制元素对鼠标交互的响应。这个属性尤其在处理复杂布局或者需要隐藏元素但又不希望它们阻止其他元素的交互时非常有用。在本文中，我们将深入探讨`...
`pointer-events` 是一个 CSS3 属性，用于控制元素如何响应鼠标和其他指针设备的交互。这个属性在处理用户界面时特别有用，特别是在有多个重叠元素或者需要阻止某些元素响应鼠标事件的情况下。通过调整 `pointer-...
通过JavaScript监听`checkbox`的`onclick`事件，动态地添加或移除`pointer-events-none`类，从而切换`overlay`元素对鼠标事件的响应。 浏览器支持方面，Firefox 3.6+、Safari 4和Google Chrome已经支持`pointer-...
MDN 上介绍为 CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target。 pointer-events 属性值有: /* Keyword values */ pointer-events: auto; pointer-events: none; pointer-events: ...
CSS中的`pointer-events`属性是一个非常有用的工具，它允许开发者精确控制哪些图形元素可以成为鼠标事件的target。这个属性可以极大地方便前端开发者在制作各种交互元素时的复杂场景处理，尤其在处理弹层、遮罩层这...
总而言之，pointer-events是CSS3中一个强大的属性，它不仅能够控制元素的交互性，还能避免不必要的事件触发，从而提升用户界面的友好性和网页的交互性能。在使用时应考虑其作用范围和兼容性，确保在不同的环境和场景...
CSS的`pointer-events`属性提供了一种更简洁的解决方案，可以直接从样式层面控制元素是否可以响应鼠标事件。`pointer-events`属性可以接受多个值，如`none`、`auto`等。当设置为`none`时，元素将不会捕获任何鼠标...
现在，利用css的pointer-events属性即可做到。 CSS pointer-events Pointer-events原本来源于SVG...如果你已经设置一个元素的css属性为pointer-events: none。它将不会捕获任何click事件，而是让事件穿过该元素到达下面
在网页开发中，交互性是至关重要的，而CSS3 Pointer Events属性正是提升用户交互体验的重要工具。这个属性允许开发者控制元素如何响应鼠标、触摸甚至是笔触等输入设备的事件。了解并熟练运用Pointer Events，可以...
总结来说，Vue.js的事件修饰符和JavaScript的`event.stopPropagation()`提供了阻止事件冒泡的机制，而CSS的`pointer-events`属性则允许我们控制元素是否响应鼠标事件，从而避免事件穿透问题。在实际开发中，根据具体...
在CSS中，我们可以使用`pointer-events`属性来阻止鼠标事件。将`pointer-events`设置为`none`，可以使得元素对鼠标点击无响应，这样下拉框就不会弹出： ```css select[readonly] { pointer-events: none; } ``` ...