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

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");
}

Say Div 功能在 firefox 上不工作。

J fiddle : https://jsfiddle.net/jainvabhi/nmp2L7ma/3/

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

Answer 1

我不确定 Firefox 是否允许您使用按钮元素作为父元素来执行此操作。据我了解，根据Content Model对于按钮，你不应该有互动的 child 。也就是说，如果您将按钮更改为如下所示的 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

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