子元素禁用时如何让父元素捕获点击事件？

需要实现：当子元素（button、input这类可禁用元素）处于禁用状态时，让父元素能捕获到点击事件。

现有代码如下：

<div>
  <button disabled>button</button>
</div>

document.querySelector('div').addEventListener('click', () => {
  alert('clicked!')
  // 两种阻止冒泡的方式都没用
  event.stopImmediatePropagation()
  event.stopPropagation()
}, { capture: true })

点击禁用的button时，div没法捕获click事件（这是符合HTML标准的），但我需要让div能捕获这个事件。另外pointer-events:none的方案不能用——因为我需要用document.elementsFromPoint()获取这个按钮，而这个属性会导致按钮无法被该函数检索到。

可以通过监听父元素的mouseup（或mousedown）事件来绕过这个限制，因为禁用元素只会阻止click事件的触发和传播，基础的指针事件（如mousedown、mouseup）依然会正常传递到父元素。

方法一：结合elementsFromPoint判断目标 #

<div id="parent">
  <button disabled id="disabledBtn">button</button>
</div>

const parent = document.getElementById('parent');
const disabledBtn = document.getElementById('disabledBtn');

parent.addEventListener('mouseup', (e) => {
  // 获取点击位置对应的所有元素
  const clickedElements = document.elementsFromPoint(e.clientX, e.clientY);
  // 检查是否包含目标禁用按钮
  if (clickedElements.includes(disabledBtn)) {
    alert('clicked!');
    // 按需阻止后续事件传播
    e.stopPropagation();
  }
}, { capture: true });

方法二：利用事件路径composedPath判断 #

如果不需要精确指定某一个按钮，而是要匹配所有禁用的可交互元素，可以用composedPath：

parent.addEventListener('mouseup', (e) => {
  const eventPath = e.composedPath();
  // 检查事件路径中是否存在禁用的可交互元素
  const hasDisabledTarget = eventPath.some(el => el.disabled !== undefined && el.disabled);
  if (hasDisabledTarget) {
    alert('clicked!');
  }
}, { capture: true });

原理 #

禁用元素的核心限制是不触发click事件，但mousedown、mouseup这类底层指针事件不受影响。通过监听这些事件，再判断点击目标是否为禁用元素，就能实现父元素“捕获”点击的效果，同时完全不影响document.elementsFromPoint()对禁用按钮的检索。

内容的提问来源于stack exchange，提问作者肉蛋充肌