如何阻止按钮上方的伪元素触发点击事件？

最优方案：用clip-path实现按钮形状 #

不用伪元素遮挡，直接通过clip-path裁剪按钮的可视区域，让点击区域和视觉区域完全匹配，代码更简洁且符合交互预期：

.btn {
    border: none;
    height: 60px;
    background-color: #3b82f6;
    color: white;
    padding: 5px 20px 5px 40px;
    cursor: pointer;
    /* 裁剪出左侧U型缺口 */
    clip-path: polygon(20px 0, 100% 0, 100% 100%, 20px 100%, 0 50%);
}

这个clip-path通过定义多边形路径，直接让按钮呈现U型，点击时只有蓝色可视区域会响应，白色缺口区域不会触发按钮事件。

现有代码的快速修复 #

如果要保留伪元素的实现方式，问题根源是伪元素属于按钮的子元素，点击事件会冒泡到按钮。解决方法是将伪元素改为按钮的兄弟元素，作为独立遮罩层：

HTML结构调整 #

<div class="btn-wrap">
  <button class="btn">按钮文本</button>
  <div class="btn-mask"></div>
</div>

CSS代码修改 #

.btn-wrap {
  position: relative;
  display: inline-block;
}

.btn {
    border: none;
    height: 60px;
    background-color: #3b82f6;
    border-radius: 0 30px 30px 0;
    color: white;
    padding: 5px 20px 5px 40px;
    cursor: pointer;
}

.btn-mask {
    background-color: white;
    border-radius: 0 100% 100% 0;
    position: absolute;
    bottom: 0;
    left: -20px;
    height: 60px;
    width: 40px;
    cursor: auto;
    z-index: 1; /* 确保遮罩在按钮上方 */
}

遮罩层作为独立元素，点击时不会触发按钮的点击事件，同时保持视觉效果不变。

实现方式优劣分析 #

你当前用伪元素遮挡的方式属于视觉模拟，存在交互区域与视觉区域不匹配的问题，属于不推荐的实践。而clip-path方案直接定义元素的可交互边界，视觉与交互统一，代码更简洁，是更现代的实现方式。

内容的提问来源于stack exchange，提问作者Sown Leon