我们在 HTML 开发时可能会遇到这样的情况:页面上有一些元素使用绝对定位布局,这些元素可能会遮盖住它们位置下方的某个元素的部分或者全部。默认情况下,下方元素被遮挡的部分是不会响应鼠标事件的。
但有时我们可能需要被遮盖住的元素仍然能够处理鼠标事件。 比如:我们在一个地图组件上覆盖了一个显示信息的元素,但又不想让这个信息面板影响下方地图的拖动等操作。那么我们可以使用一个叫 pointer-events 的 css 属性来实现。
一. pointer-events属性
- auto——效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效果相同。
- none——元素不再是鼠标事件的目标,鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值,比如auto,鼠标还是会监听这个子元素的。
- 其它属性值为SVG专用,这里不再多介绍了。
二. 使用场景
1. 让链接不能点击
这里将第二个 a 标签 pointer-events 样式属性设置为 none,那么该链接不仅无法被点击,而且没有鼠标手形样式。(同样的,我们可以使用该样式来避免按钮多次点击、表单重复提交等问题。)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<ul>
<li><a href="http://www.hangge.com">可以点击的链接</a></li>
<li><a href="http://www.hangge.com" style="pointer-events:none">不能点击的链接</a></li>
</ul>
</body>
</html>
2. 让鼠标点击穿透上方的 div
(1) 效果图
下面样例中黄色半透明的 div 使用绝对定位,覆盖在链接的上方。默认情况下,黄色区域下方的链接我们是没法点击到的。这里我们对黄色 div 加上一个 pointer-events 属性后,就可以穿过该层去点击下面的 a 标签了。
(2) 示例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.top {
width: 100px;
height: 90px;
position: absolute;
top: 0;
left: 65px;
background: yellow;
opacity: 0.5;
pointer-events: none;
}
</style>
</head>
<body>
<!-- 下方的链接 -->
<ul>
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="http://www.baidu.com">www.baidu.com</a></li>
</ul>
<!-- 上方黄色div -->
<div class="top"></div>
</body>
</html>