CSS3 pointer-events详解:允许鼠标点击穿透后面的元素

文章2019-07-08203 人已阅来源:网络

最近发现了一个叫pointer-events的css属性,是一个与javascript有关的属性,pointer-events直译为指针事件,当把值设置为none后,他有如下相关特性。

  1. 阻止用户的点击动作产生任何效果
  2. 阻止缺省鼠标指针的显示
  3. 阻止CSS里的hover和active状态的变化触发事件
  4. 阻止JavaScript点击动作触发的事件

一个CSS属性能做所有的这么多事情!

当使用pointer-events:none,表示它将捕获不到任何点击,而只是让事件穿透到它的下面。代码如下:

运行代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>CSS3 pointer-events详解:允许鼠标点击穿透后面的元素</title>
</head>
<body>
    <style>
        body{ text-align: center;}
        a{ margin: 20px auto; border: 1px solid; text-decoration: none; display: inline-block; border-radius: 3px; line-height: 3; padding: 0 30px; color: #666; }
    </style>
    <a href="//www.tonjay.com" style="pointer-events:none;">Link</a>
    <p>这个链接你点不动噢</p>
</body>
</html>

如果值是auto,则效果和没有定义pointer-events属性相同,鼠标不会穿透当前层。在SVG中,该值和visiblePainted的效果相同。

这个pointer-events属性有很多可以使用的属性值,但大部分都是针对SVG的:auto, none, visiblePainted*, visibleFill*, visibleStroke*, visible*, painted*, fill*, stroke*, all*, 以及 inherit。

一些需要注意的关于pointer-events的事项:

  1. 子元素可以声明pointer-events来解禁父元素的阻止鼠标事件限制。
  2. 如果你对一个元素设置了click事件监听器,然后你移除了pointer-events样式声明,或把它的值改变为auto,监听器会重新生效。基本上,监听器会遵守pointer-events的设定。