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>

小提琴叉

如果這是用於生產應用程序，請在為此目的使用按鈕以外的元素時考慮有效的可訪問性。