Web常用工具 二维码美化 在线压缩 JavaScript AI工具汇总网站 ASP.NET控件源码查询 W3CHTML W3SCHOOL TypeScript 开源中国 51aspx github codeproject SQLBACKUP 几种排序算法比较 SQL中deny权限 MSDN下载 HttpWebRequest类 HTML5 stackoverflow ASP.NET 页生命周期概述 IIS 5.0 和 6.0 的 ASP.NET 应用程序生命周期概述 [SQL Server]视图sys.sysprocesses brnshop学习 SQL视频 Fiddler帮助文档 Sprint.Net SQLServer牛人博客 codeplex IIS官网 IE11 Developer Jquery源码视频上 Jquery源码视频下 Jquery Bugs jquery.miaov.com 正则表达式 Jquery API 1.9 Service Broker Javascript Object中的方法讲解 Microsoft webcast 微信开发接口 ECMAScript5 Underscore Jquery Bugs SQL存储过程事务嵌套 官网SQL事务锁 2345天气插件 Json数据查看 C++ jquery-plugin-validate 博学谷(传智播客) Swift视频 IOS代码论坛 SWIFT设计模式 操作系统下载 AngularJS VueJS ASPNETCORE 前端题库 Node.js ASPNETCORE 腾讯课堂 SwiftUI SwiftUI疑问解答 ADO.NET SMO 数字化企业网 Unicode码查询 Redis使用文档 .NET 微服务：适用于容器化 .NET 应用程序的体系结构 .NETCore5.0微软官方文档 CSS3.0 在 ASP.NET Core 中配置 Windows 身份验证 Maven使用教程 Maven Repository Thymeleaf Thymeleaf中文CSDN Spring官方文档 Spring中文文档 SpringBoot SpringData SVG在线设计工具 SVG教程01 SVG教程02 fontawesome图标库 mybatis官网 mybatis-spring中文 mysql教程 python教程 python的scrapy教程01 python的scrapy教程02 VS开发python xpath教程 腾讯向量数据库教程 JSZip浏览器内存中创建文件与文件夹 axios的使用文档 SheetJS(JS操作excel)的使用文档 金蝶云星空学习成长 常用接口调用 Three.js电子书 D3.js官网 anime.js官网 xlsx.js官网

huaan011

 

CSS3 超实用属性:pointer-events(可穿透图层的鼠标事件)

1、是什么

pointer-events 直译为指针事件，该属性指定在什么情况下某个DOM可以成为鼠标事件的 target。

简而言之，就是允许/禁止DOM的鼠标事件(click事件、hover事件、mouse事件等鼠标事件)

2、具体属性分析

用法分析：
pointer-events: auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all

    • auto -----默认值，与pointer-events属性未指定时的表现效果相同，对于SVG内容，该值与visiblePainted效果相同

    • none ----- 元素不再是鼠标事件的目标，鼠标不再监听当前层，而去监听下一层中的元素(这里的层指的是图层)。但是如果当前层的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。

      这就是穿透点击事件的关键所在！

    • 其它属性都只适用于SVG
      visiblePainted ｜ visibleFill｜visibleStroke｜visiblepainted
      fill｜stroke ｜all

3、实际代码使用中案例：

  1. 禁止点击

  2. 图层覆盖覆盖后，底层图层鼠标事件失效时(无法点击)，可以通过这个属性来实现，使得点击穿透，来触发底层的鼠标事件。

4、案例

4.1、禁止点击案例

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            .stopClick {
                pointer-events: none; //元素不再是鼠标事件的目标,禁止当前层的鼠标事件
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="https://www.baidu.com/">百度</a>    </li>
            <li><a href="http://example.com" class="stopClick">一个不能点击的链接</a></li>
        </ul>
    </body>
</html>
复制代码

第二个a标签不仅无法被点击，而且没有鼠标手形样式

4.2、点击穿透案例

复制代码
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <style>
            .bottom {
                background: yellow;
                width: 100px;
                height: 100px;
            }
            
            .top {
                width: 100px;
                height: 100px;
                position: absolute;
                top: 0;
                left: 0;
                z-index: 100;
                display: flex;
                justify-content: center;
                align-items: center;
                 /*不再监听当前图层的鼠标事件,而去监听下一层中元素的鼠标事件*/
                pointer-events: none; 

            }
            .top b{
                display:inline-block;
                margin: 0 auto;
                 /*子元素修改pointer-events，允许触发鼠标事件*/
                pointer-events:auto;  
            }
        </style>
    </head>
    <body>
        <!-- 下方div -->
        <div class="bottom">
            <a href="http://www.baidu.com">下一层--百度</a>
        </div>
        <!-- 上方div -->
        <div class="top" onclick="topSay()">
            <b id="topTxt">顶层</b>
        </div>
        
        <script>
            document.getElementById("topTxt").onclick = function(evt){
                alert('顶层内b元素的事件！');
                evt.stopPropagation();   //阻止了事件的向上传播，否则就会触发父容器的alert事件。
            }
            function topSay(){
               alert('顶层事件')
            }
        </script>
    </body>

</html>
复制代码

分析如下
原本底层被顶层覆盖，使得底层的百度跳转事件无法被触发。

但是这里顶层设置了pointer-events: none;，使得顶层的鼠标事件被禁止，浏览器转而去监听下一层的鼠标事件，这就使得百度跳转事件又可以生效了。

由于顶层内的子元素b继承了顶层的pointer-events: none;,使得b也无法触发鼠标事件，但是，b元素其自身又重新设置了pointer-events:auto;,使得b又可以触发鼠标事件了。

在b元素的点击事件上，如果不加evt.stopPropagation()，去阻止事件冒泡，通过点击b，也会触发父容器的点击事件

5、兼容性

  • IE 　11+
  • Firefox 　3.6＋
  • Chrome　4.0+
  • Safari　　6.0
  • Opera　 15.0
  • iOS Safari 6.0
  • Android Browser　2.1+
  • Android Chrome　18.0+

posted on   华安  阅读(410)  评论(0)  编辑  收藏  举报

编辑推荐：
· AI与.NET技术实操系列：基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
阅读排行：
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型，支持深度思考和联网搜索！
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目（很简单哒）
· ollama系列01：轻松3步本地部署deepseek，普通电脑可用
· 按钮权限的设计及实现

导航

统计

点击右上角即可分享
微信分享提示