纯JS处理禁用元素点击事件问题（Firefox兼容）

我之前也碰到过这个Firefox特有的棘手问题！禁用的<input>元素在Firefox里的事件处理逻辑确实和Chrome、Safari不一样——你提到的用div包裹的方法在Chrome和Safari里能生效，是因为这两个浏览器允许事件从禁用元素冒泡到外层容器，但Firefox会直接阻止禁用元素上的所有鼠标事件冒泡，哪怕外层套了div也没用。

核心原因 #

Firefox严格遵循表单元素禁用的规范：禁用的表单元素本身不会触发任何鼠标事件，同时会阻止事件向上冒泡到父元素，这就导致外层容器的点击事件也无法被触发。而Chrome和Safari在这一点上做了宽松处理，允许事件冒泡到父级。

可行解决方案：利用pointer-events: none #

最简洁且跨浏览器有效的方法，是给禁用的input设置pointer-events: none，让鼠标点击直接穿透input元素，触发外层容器的点击事件。这样不管在哪个浏览器里，都能正常捕获点击行为。

完整代码示例

<!-- HTML -->
<label class="clickable-wrapper">
  <input type="checkbox" id="a" disabled />
  Click me (label wrapper)
</label>
<div id="b" class="clickable-wrapper">
  <label>
    <input type="checkbox" id="c" disabled />
    Click me (div wrapper)
  </label>
</div>

/* CSS */
.clickable-wrapper input:disabled {
  pointer-events: none; /* 让点击穿透禁用的input */
}

/* 可选：给外层容器加个hover样式，提示可点击 */
.clickable-wrapper {
  cursor: pointer;
  padding: 8px;
}

// JavaScript
// 监听label的点击事件
document.querySelector(".clickable-wrapper:first-of-type").onclick = function() {
  const input = this.querySelector("#a");
  console.log(`Input #a is disabled: ${input.disabled}`);
};

// 监听div的点击事件
document.querySelector("#b").onclick = function() {
  const input = this.querySelector("#c");
  console.log(`Input #c is disabled: ${input.disabled}`);
};

原理说明 #

pointer-events: none会让禁用的input不再拦截任何鼠标事件，点击input的区域时，事件会直接传递到它的父元素（label或div），这样父元素的点击事件就能正常触发了。这个方法在Firefox、Chrome、Safari上都能稳定工作，而且不需要复杂的事件判断逻辑。

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