Question

我正在尝试在HTML Button元素及其子元素上传递JavaScript函数，但是在Firefox上没有触发子元素函数。

它在Chrome和Safari上运行良好。

在这里测试。

HTML Block：

<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是否允许您使用按钮元素作为父级。根据我的理解，根据按钮的Content Model，您不应该有交互式孩子。话虽如此，如果您将按钮更改为如下所示的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>

Fiddle Fork

如果这是针对生产应用程序的，请在为此目的使用按钮以外的元素时考虑有效accessibility considerations。

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

1 个答案: