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

Question

I am trying to pass JavaScript Function on HTML Button element and its Child elements, But child element function is not trigger on the Firefox.

Its working well on the Chrome and Safari.

Test here.

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:

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

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

Say Div function is not working on the firefox.

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

Code Pen: https://codepen.io/jainvabhi/pen/VQNgZq

Answer 1

I am not sure if Firefox will let you do this with a button element as the parent. In my understanding, according to the Content Model for the button, you should not have interactive children. That being said, if you change the button to a div like following, it will work.

<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

If this is for a production application, please take into consideration potent accessibility considerations when using an element other than a button for this purpose.