Web Components与点击事件：Chrome与Firefox的行为差异

现象回顾 #

你搭建的TestButton组件中，宿主元素<test-button>绑定了点击事件，内部按钮带插槽。点击后内部按钮会被禁用2秒：

• Chrome：禁用期间反复点击插槽文本，事件处理函数持续触发，控制台不断打印日志
• Firefox：禁用期间点击无效，事件被完全忽略
• 移除插槽改用内部文本后，Chrome行为和Firefox一致

核心原因分析 #

这本质是浏览器对Shadow DOM事件重定向和禁用按钮的事件拦截规则的实现差异：

1. 事件触发的实际目标
   当你点击"Test Button"文本时，这个文本属于Light DOM（宿主元素的子节点，通过插槽分发到Shadow DOM的按钮中），并非Shadow DOM内的节点。点击事件的原始目标是这个文本节点，而非内部的<button>。

2. 浏览器对禁用按钮的事件处理差异

   • Firefox：认为禁用的<button>会管辖其分发的插槽内容，只要点击区域属于按钮的视觉范围（包括插槽文本），就会阻止点击事件向上传播，最终不会触发宿主元素的事件绑定。
   • Chrome：仅会阻止以禁用<button>本身为目标的事件，而插槽文本属于Light DOM节点，不在禁用按钮的直接拦截范围内。事件会正常向上冒泡，经过Shadow DOM边界时被重定向到宿主元素<test-button>，从而触发绑定的onclick函数。

3. 移除插槽后的行为统一原因
   当把插槽换成内部文本（比如<button>Test Button</button>），点击的目标变成Shadow DOM内的文本节点，属于禁用按钮的子节点。此时Chrome也会遵循禁用按钮的事件拦截规则，阻止事件向上传播，所以行为和Firefox一致。

统一行为的解决方案 #

如果要让Chrome和Firefox表现一致，有两种常见方案：

• 方案1：将点击事件绑定到Shadow DOM内的<button>上，而非宿主元素，这样禁用按钮时，所有浏览器都会阻止事件触发
• 方案2：在宿主元素的点击事件中，先判断内部按钮是否禁用，若禁用则直接返回：

  function buttonClicked(element) {
      const innerButton = element.shadow.querySelector("button");
      if (innerButton.disabled) return;
      console.log("log", element.tagName);
      innerButton.setAttribute("disabled", true);
      setTimeout(() => {
          innerButton.removeAttribute("disabled");
      }, 2000);
  }
  

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