如何为设置pointer-events: none的元素绑定点击事件触发提示

pointer-events: none的作用是让元素完全忽略所有鼠标、触摸类指针事件，所有事件会直接穿透该元素触发到下层元素，所以直接给带这个属性的按钮绑定点击事件无法被触发，可选择以下任意方案实现需求：

方案1（优先推荐）：调整禁用样式逻辑，去掉pointer-events: none，自主控制点击逻辑 #

保留按钮禁用状态的视觉样式，移除指针事件屏蔽属性，在点击事件里先判断按钮状态再走对应逻辑：

• 调整CSS代码：

.disable {
  /* 移除pointer-events: none属性 */
  opacity: 0.6;
  cursor: not-allowed;
  /* 其他你需要的禁用状态样式 */
}

• 绑定点击事件逻辑：

document.querySelector('.btn').addEventListener('click', function() {
  // 先判断按钮是否处于禁用状态
  if (this.classList.contains('disable')) {
    alert('当前按钮处于不可点击状态');
    return;
  }
  // 按钮可用状态下的正常业务逻辑写在下方
})

该方案兼容性最好，逻辑易维护，适配绝大多数业务场景。

方案2：保留pointer-events: none，在父元素上绑定事件捕获点击 #

事件会穿透禁用按钮触发到父元素，通过父元素的点击事件判断点击目标是否为禁用按钮即可：

• 给按钮包裹父容器：

<div class="btn-container">
  <button type="button" class="btn disable">Button</button>
</div>

• 给父容器绑定事件：

document.querySelector('.btn-container').addEventListener('click', function(e) {
  const clickTarget = e.target.closest('.btn.disable');
  if (clickTarget) {
    alert('当前按钮处于不可点击状态');
  }
})

该方案不需要修改原有disable类的样式规则，适合不方便调整历史CSS的场景。

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