嵌套按钮：如何实现单独的功能答案

【问题标题】：Nested buttons: how to achieve separate functionality嵌套按钮：如何实现单独的功能
【发布时间】：2017-11-06 01:55:30
【问题描述】：

我有一个附加到父按钮的按钮：

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()。如何将两者分开？

重叠的按钮如下所示：

【问题讨论】：

我很感激，@PHPglue。澄清一下：当你说按钮不能有孩子时，你是说这只是不好的编码习惯，还是在 javascript/hmtl 中不可能实现？如果是后者，为什么我的 child_button 成功显示在我的 parent_button 中？
我不知道嵌套按钮是否应该工作，但无论如何你不应该这样做。见this。
@Phpglue 正走在正确的轨道上，您应该如何解决您的问题。这是一种不好的编码习惯，很容易将两个按钮放在一个容器内，然后将事件附加到每个透视按钮。毕竟他们正在执行两个独立的动作。您的代码将更易于维护。您可以轻松地将一个按钮换成另一个元素，它不会破坏您的代码，因为它不会与您给出的示例中的父按钮紧密耦合。
感谢@larry-lane 和 karamarimo 的建议。我将来会避免嵌套按钮。我想这样做的原因与我的网页上的间距/对齐有关：拥有一个包含更多内容的按钮比使用容器、标签等更容易。不过，我理解这是仍然没有足够的理由去做我正在做的事情。

标签： javascript button onclick nested

【解决方案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();
})

&lt;button id="pb"&gt;Parent Button &lt;button id="cb"&gt;Child Button&lt;/button&gt;&lt;/button&gt;

注意：我认为默认的行为是当你点击一个子元素时，子元素和父元素的事件都应该触发，但是在这个例子中，这不会发生；也许这是按钮作为父母的特殊之处。

【讨论】：