pointer-events属性屏蔽⿏标事件（点击穿透上层元素）
应⽤场景
我们在 HTML 开发时可能会遇到这样的情况：页⾯上有⼀些元素使⽤绝对定位布局，这些元素可能会遮盖住它们位置下⽅的某个元素的部分或者全部。默认情况下，下⽅元素被遮挡的部分是不会响应⿏标事件的。
但有时我们可能需要被遮盖住的元素仍然能够处理⿏标事件。⽐如：我们在⼀个地图组件上覆盖了⼀个显⽰信息的元素，但⼜不想让这个信息⾯板影响下⽅地图的拖动等操作。那么我们可以使⽤⼀个叫 pointer-events 的 css 属性来实现。
pointer-events 属性介绍
1，属性值说明
pointer-events 是 CSS3 中新增的⼀个属性，其⽀持的值⼤多都与 SVG 相关，我们不⽤理会。对我们来说，主要关注：none|auto 这两个属性值。
auto：与 pointer-events 属性未指定时的表现效果相同。
none：该元素永远不会成为⿏标事件的 target。但是，当其后代元素的 pointer-events 属性指定其他值时，⿏标事件可以指向后代元素，在这种情况下，⿏标事件将在捕获或冒泡阶触发⽗元素的事件侦听器。
pointer-events:none 注意事项：
使⽤ pointer-events:none 来阻⽌元素成为⿏标事件⽬标不⼀定意味着元素上的事件侦听器永不会触发。
如果元素后代明确指定了 pointer-events 属性并允许其成为⿏标事件的⽬标，那么指向该元素的任何事件在事件传播过程中都将通过⽗元素，并以适当的⽅式触发其上的事件侦听器。
当然位于屏幕上在⽗元素上但不在后代元素上的⿏标活动都不会被⽗元素和后代元素捕获（将会穿过⽗元素⽽指向位于其下⾯的元素）。使⽤样例
1，让链接不能点击
这⾥将第⼆个 a 标签 pointer-events 样式属性设置为 none，那么该链接不仅⽆法被点击，⽽且没有⿏标⼿形样式。（同样的，我们可以使⽤该样式来避免按钮多次点击、表单重复提交等问题
2，让⿏标点击穿透上⽅的 div
（1）效果图
下⾯样例中黄⾊半透明的 div 使⽤绝对定位，覆盖在链接的上⽅。
默认情况下，黄⾊区域下⽅的链接我们是没法点击到的。
这⾥我们对黄⾊ div 加上⼀个 pointer-events 属性后，就可以穿过该层去点击下⾯的 a 标签了。
<!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;
css鼠标点击样式pointer-events: none;
}
</style>
</head>
<body>
<!-- 下⽅的链接 -->
<ul>
<li><a href="www.hangge">航歌</a></li>
<li><a href="www.hangge">hangge</a></li> </ul>
<!-- 上⽅黄⾊div -->
<div class="top"></div>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论