javascript - 嵌套按钮 : how to achieve separate functionality

Question

我有一个按钮附加到父按钮:

var parent_button = document.createElement("button");
var child_button = document.createElement("button");
parent_button.appendChild(child_button);

我想为 child_button 创建独立于 parent_button 的功能:

parent_button.onclick = function () {
  //do stuff
};

child_button.onclick = function () {
  //do some other stuff
};

但是鉴于这段代码，每当我点击 child_button 时，我必然会触发 parent_button.onclick()。如何区分两者？

重叠的按钮看起来像这样:

Answer 1

在子按钮的事件对象上使用stopPropagation()。它将阻止事件从子级传播到父级。

你可以在这里看到一个例子:

var pb = document.getElementById("pb");
var cb = document.getElementById("cb");
pb.addEventListener("click", function(e) {
  console.log("Parent");
});
cb.addEventListener("click", function(e) {
  console.log("Child");
  e.stopPropagation();
})

<button id="pb">Parent Button <button id="cb">Child Button</button></button>

注意:我认为默认行为是当你点击一个子元素时，应该触发子元素和父元素的事件，但在这个例子中，这并没有发生；也许这对于作为 parent 的按钮来说是特别的。