文档
pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为鼠标事件的 target
常用属性
/* Keyword values */
pointer-events: auto; /* 与pointer-events属性未指定时的表现效果相同 */
pointer-events: none; /* 元素永远不会成为鼠标事件的target *//* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;
看一段 css 和 js 代码,由里到外嵌套

点击红色部分 事件触发顺序
boxRed click
boxYellow click
boxGreen click
点击黄色部分 事件触发顺序
boxYellow click
boxGreen click
点击绿色部分 事件触发顺序
boxGreen click
修改一下布局,外层相对定位,内层绝对定位

点击绿色部分 事件触发顺序
boxGreen click
点击黄色部分 事件触发顺序
boxYellow click
boxGreen click
点击红色部分 事件触发顺序
boxRed click
boxGreen click
如果设置css属性
.box-red {position: absolute;right: 0;width: 300px;height: 250px;background-color: red;/* 取消鼠标事件 */pointer-events: none;
}
点击红色区域,只会触发如下事件,实现了穿透效果
boxGreen click
参考
css 点击穿透 pointer-events: none;一般用于遮罩