如何设置pointer-events，仅使单个下层按钮可点击

核心解决方法 #

给父元素.my-div设置pointer-events: none后，通过为需要可点击的按钮.my-btn1单独设置pointer-events: auto来恢复其点击功能，而.my-btn2继承父元素的pointer-events: none保持不可点击状态。

完整代码示例 #

修正后的HTML结构（原代码存在标签闭合错误）

<div className="my-div">
  <button className="my-btn1">this button should be clickable</button>
  <button className="my-btn2">this button should not be clickable</button>
</div>

CSS样式

.my-div {
  position: relative;
  pointer-events: none;
}

.my-btn1, .my-btn2 {
  position: absolute;
}

.my-btn1 {
  pointer-events: auto; /* 覆盖父元素的属性，允许接收点击事件 */
}

关键原理 #

• pointer-events: none会使元素本身及未单独配置的子元素都无法接收鼠标事件。
• 子元素可以通过设置pointer-events: auto覆盖父元素的继承属性，重新获得事件响应能力。
• 由于按钮是绝对定位，该方案不会受文档流布局影响，精准控制单个按钮的点击权限。

内容的提问来源于stack exchange，提问作者Sobhan Shamseddini Lori