JavaScript 事件传播不适用于 Firefox 上的 HTML 按钮子元素。

Question

我试图在 HTML Button 元素及其子元素上传递 JavaScript 函数，但子元素函数不会在 Firefox 上触发。

它在 Chrome 和 Safari 上运行良好。

在这里测试。

HTML 块：

<div class="container p-5">
  <button onClick="sayButton();" class="btn btn-block btn-primary">
    <span class="badge badge-light" onClick="sayDiv(event)">Hello</span>
  </button>
</div>

JavaScript 函数：

function sayButton() {
 alert("button");
}

function sayDiv(e) {
 e.stopPropagation();
 alert("div");
}

说 Div 功能在 firefox 上不起作用。

jsfiddle： https ://jsfiddle.net/jainvabhi/nmp2L7ma/3/

代码笔： https : //codepen.io/jainvabhi/pen/VQNgZq

Answer 1

我不确定 Firefox 是否会让您使用按钮元素作为父元素来执行此操作。 根据我的理解，根据按钮的内容模型，您不应该有交互式子项。 话虽如此，如果您将按钮更改为如下所示的 div，它将起作用。

<div class="container p-5">
  <div onClick="sayButton();" class="btn btn-block btn-primary">
    <span class="badge badge-light" onClick="sayDiv(event)">Hello</span>
  </div>
</div>

小提琴叉

如果这是用于生产应用程序，请在为此目的使用按钮以外的元素时考虑有效的可访问性。