CSS3 - 使用pointer-events属性屏蔽鼠标事件（让鼠标点击穿透上层元素）

作者：hangge | 2017-11-21 08:10

我们在 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 属性并允许其成为鼠标事件的目标，那么指向该元素的任何事件在事件传播过程中都将通过父元素，并以适当的方式触发其上的事件侦听器。
当然位于屏幕上在父元素上但不在后代元素上的鼠标活动都不会被父元素和后代元素捕获（将会穿过父元素而指向位于其下面的元素）。

2，浏览器兼容情况

（1）桌面浏览器

IE：11+（IE6~IE10均不支持）
Firefox：3.6＋
Chrome：4.0+
Safari：6.0
Opera：15.0

（2）移动设备浏览器

iOS Safari：6.0
Android Browser：2.1+
Android Chrome：18.0+

二、使用样例

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.hangge.com">航歌</a></li>
	    <li><a href="http://www.hangge.com">hangge.com</a></li>
    </ul>
    <!-- 上方黄色div -->
    <div class="top"></div>
  </body>
</html>

HTML5 / CSS3