禁用按钮的自定义子元素点击事件会冒泡？是否符合预期？

现象说明 #

普通子元素场景 #

当禁用按钮内嵌套原生<p>标签时，点击<p>元素不会触发父容器container的点击事件，符合预期行为：

<div id="container">
  <button disabled>
    <p>X</p>
  </button>
</div>

自定义元素场景 #

当禁用按钮内嵌套自定义元素时，点击自定义元素会导致事件冒泡到父容器container，但点击按钮本身（边缘区域）则不会触发父容器的点击监听：

<div id="container">
  <button disabled>
    <some-custom-element>
      <!-- some svg stuff -->
    </some-custom-element>
  </button>
</div>

对应的监听代码：

$container = document.getElementById('container')
$container.addEventListener('click', () => {
  // 业务逻辑
})

结论与原因 #

这种情况是符合浏览器默认行为的，核心原因在于浏览器对禁用按钮的事件拦截逻辑差异：

• 对于原生HTML子元素，浏览器会自动将禁用按钮的状态“传递”给它们，拦截其点击事件的冒泡，确保整个禁用按钮区域的交互都被阻止。
• 自定义元素属于独立的自定义DOM节点，浏览器不会默认将禁用按钮的拦截规则应用到它身上。点击自定义元素时，事件会正常向上冒泡，当到达按钮节点时，浏览器不会拦截这个来自子自定义元素的事件，因此事件会继续传播到父容器，触发对应的监听。

解决方案 #

如果需要阻止自定义元素的点击事件冒泡到父容器，可以通过以下两种方式实现：

1. 在自定义元素内部阻止事件冒泡：

class SomeCustomElement extends HTMLElement {
  connectedCallback() {
    this.addEventListener('click', (e) => {
      e.stopPropagation();
    });
  }
}
customElements.define('some-custom-element', SomeCustomElement);

2. 在禁用按钮上添加监听，阻止事件传播：

document.querySelector('button').addEventListener('click', (e) => {
  e.stopPropagation();
});

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