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

文章2019-07-081,136 人已阅来源：网络

最近发现了一个叫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的设定。

相关内容

  • 为什么grid-gap会导致溢出？

    您有一个3列网格容器(.body):grid-template-columns:25%50%25%这些列的总宽度为100%。然后在列（和行）之间添加沟槽：grid-gap:10...

  • css3给背景图层加颜色遮罩的方法

    （学习视频分享：css视频教程）在开发中，有时遇到需要给背景层加颜色遮罩的项目，现在特定总结一下给背景图层加颜色遮罩的方法。方法一：通过定位叠加(注意层级)<divcla...

    css3给背景图层加颜色遮罩的方法
  • 使用CSS实现的几种进度条

    （学习视频分享：css视频教程）进度条是一个非常常见的功能，实现起来也不难，一般我们都会用div来实现。作为一个这么常见的需求，whatwg肯定是不会没有原生组件提供（虽然有我...

    使用CSS实现的几种进度条
  • CSS3实现文字折纸效果的方法（代码示例）

    本篇文章给大家通过示例介绍一下使用CSS3来实现文字折纸效果的方法，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下，希望对大家有所帮助。CSS3文字折纸代码如下，...

    CSS3实现文字折纸效果的方法（代码示例）
  • css3字体可以模糊吗

    css3字体的可以模糊的；开发者可以使用CSS3中的filter属性来实现字体模糊效果，filter语法是“filter:blur(px);”，其filter属性定义了元素的可...

    css3字体可以模糊吗
  • vs2010 如何支持css3

    vs2010支持css3的方法：首先下载CSS3IntellisenseSchema并安装；然后用“Win+R”输入“regedit”打开注册表；接着将css30.xml拷贝到...

    vs2010 如何支持css3
  • 聊聊你可能不了解的CSS属性函数 attr()

    本篇文章带大家了解一下CSS属性函数attr()。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。属性函数attr()用于获取HTML元素里面的属性值,并用于样...

    聊聊你可能不了解的CSS属性函数 attr()
  • 浅谈css3 device-width和width之间的差异

    本篇文章和大家谈谈css媒体查询中device-width与width的区别。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。【推荐教程：CSS视频教程】1.d...

    浅谈css3 device-width和width之间的差异
  • css3怎么设置元素背面不可见

    在css3中，可以利用backface-visibility属性，通过给元素添加“backface-visibility:hidden;”样式来设置背面不可见。backface...

    css3怎么设置元素背面不可见
  • 详细了解CSS3中的border-image-slice属性

    【推荐教程：CSS视频教程】首先我们来了解一下它是干嘛的。说明：文档说明：它是控制图像边界向内偏移的。what？？？这是嘛意思啊？根本看不懂！！！好的，我们先不要急，我们在看看...

    详细了解CSS3中的border-image-slice属性
浏览更多有关 的内容