JavaScript事件传播在HTML Button子元素上不适用于Firefox。

Posted 2021-03-30

我试图在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/

Codepen：qazxsw poi

答案

我不确定Firefox是否允许您使用按钮元素作为父级。根据我的理解，按照按钮的https://codepen.io/jainvabhi/pen/VQNgZq，你不应该有互动的孩子。话虽如此，如果您将按钮更改为如下所示的div，它将起作用。

Content Model

<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>

如果这是用于生产应用程序，请在为此目的使用按钮以外的元素时考虑强大的Fiddle Fork。