一、概述
CSS点击穿透是指，在某个有子元素的元素上绑定点击事件时，如果子元素处于该元素的坐标范围内，那么子元素接收到了点击事件，而父元素并没有接收到该点击事件，从而无法触发对应的点击事件。
一般来说，如果一个元素上面有子元素，我们在该元素上绑定的点击事件都不会起作用，只有在子元素上绑定事件才能起作用。这是因为点击事件传递是有优先级的，先传递给子元素，如果子元素没有捕获该事件，再向上层元素冒泡。
二、实例分析
下面，我们通过实例来演示点击穿透的具体表现：
<div class="container">
<div class="inner"></div>
</div>
.container {
position: relative;
width: 200px;
height: 200px;
background: #eee;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
background: #f00;
}
在这个示例中，我们创建了一个父元素和一个子元素。父元素有一定的大小，并且在CSS中使用了相对定位，子元素则使用了绝对定位，并且通过margin属性进行方位调整。
接下来，我们给父元素绑定一个点击事件，当点击父元素时，会进行相应的响应代码，在这里我们可以通过向控制台输出消息来模拟这种行为。
const container = document.querySelector('.container');
container.addEventListener('click', () => {
console.log('container clicked');
});
那么，当我们在父元素中心区域点击时，我们期望看到的是控制台输出 "container clicked" 的消息。而当我们在子元素区域中点击时，我们期望看到的是完全没有任何响应。
但是，实际上情况并不是这样的。如果我们点击子元素，并且该子元素完全位于父元素的中心区域中，那么此时还是会输出 "container clicked" 的消息，说明父元素的点击事件被穿透到了子元素身上。
三、解决方法
1. pointer-events
CSS3中提供了一个pointer-events属性，可以针对当前元素指定是否可以响应鼠标事件。通过将该属性设置为none，可以使当前元素在鼠标点击事件中被忽略，从而达到防止点击穿透的效果。
.inner {
pointer-events: none;
}
上述代码将子元素的pointer-events属性设置为none，从而可以避免子元素接收到父元素的鼠标点击事件，实现点击穿透的防护
2. 阻止事件冒泡
如果在父元素的点击事件中主动调用事件对象的stopPropagation()方法，可以阻止事件向上冒泡，从而避免事件穿透到父元素上。
const container = document.querySelector('.container');
container.addEventListener('click', (event) => {
console.log('container clicked');
event.stopPropagation();
});
上述代码将父元素的点击事件回调函数中增加了event.stopPopagation()调用，以避免事件传递到父元素。
3. 重构HTML结构
如果HTML结构不是很复杂，那么也可以通过重构HTML结构的方式实现点击穿透的防护。比如，将子元素提取出来，并且设置为父元素的兄弟元素。
<div class="container">
<div class="mask"></div>
</div>
<div class="inner"></div>
.container {
position: relative;
width: 200px;
height: 200px;
background: #eee;
}
.mask {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.inner {
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
background: #f00;
}
在上述示例中，我们将子元素提取出来，并且设置为父元素的兄弟元素，这样就不会出现点击穿透的问题。
四、小结
本文详细介绍了CSS的点击穿透问题，并且提供了多种解决方法。相信只要按照这些方法调整CSS样式，就可以避免这种问题的出现。
