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

1、是什么

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

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

2、具体属性分析

auto -----默认值，与pointer-events属性未指定时的表现效果相同，对于SVG内容，该值与visiblePainted效果相同
none ----- 元素不再是鼠标事件的目标，鼠标不再监听当前层，而去监听下一层中的元素(这里的层指的是图层)。但是如果当前层的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的。

这就是穿透点击事件的关键所在！
其它属性都只适用于SVG
visiblePainted ｜ visibleFill｜visibleStroke｜visible painted
fill｜stroke ｜all

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

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

4、案例

　　4.1、禁止点击案例

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <style>
 6             .stopClick {
 7                 pointer-events: none; //元素不再是鼠标事件的目标,禁止当前层的鼠标事件
 8             }
 9         </style>
10     </head>
11     <body>
12         <ul>
13             <li><a href="https://www.baidu.com/">百度</a>    </li>
14             <li><a href="http://example.com" class="stopClick">一个不能点击的链接</a></li>
15         </ul>
16     </body>
17 </html>

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

4.2、点击穿透案例

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <style>
 6             .bottom {
 7                 background: yellow;
 8                 width: 100px;
 9                 height: 100px;
10             }
11             
12             .top {
13                 width: 100px;
14                 height: 100px;
15                 position: absolute;
16                 top: 0;
17                 left: 0;
18                 z-index: 100;
19                 display: flex;
20                 justify-content: center;
21                 align-items: center;
22                  /*不再监听当前图层的鼠标事件,而去监听下一层中元素的鼠标事件*/
23                 pointer-events: none; 
24 
25             }
26             .top b{
27                 display:inline-block;
28                 margin: 0 auto;
29                  /*子元素修改pointer-events，允许触发鼠标事件*/
30                 pointer-events:auto;  
31             }
32         </style>
33     </head>
34     <body>
35         <!-- 下方div -->
36         <div class="bottom">
37             <a href="http://www.baidu.com">下一层--百度</a>
38         </div>
39         <!-- 上方div -->
40         <div class="top" onclick="topSay()">
41             <b id="topTxt">顶层</b>
42         </div>
43         
44         <script>
45             document.getElementById("topTxt").onclick = function(evt){
46                 alert('顶层内b元素的事件！');
47                 evt.stopPropagation();   //阻止了事件的向上传播，否则就会触发父容器的alert事件。
48             }
49             function topSay(){
50                alert('顶层事件')
51             }
52         </script>
53     </body>
54 
55 </html>

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

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

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

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

来源“：https://www.cnblogs.com/houxianzhou/p/18220412

posted on 2025-07-14 10:04 华安阅读(213) 评论(0) 收藏举报

刷新页面返回顶部

huaan011