点击body内的按钮时如何阻止body上绑定的点击事件触发？

• 方法调用错误：event.stopPropagation是函数，你遗漏了末尾的调用括号()，代码实际没有执行阻止冒泡的逻辑
• 逻辑位置错误：你将阻止冒泡的代码写在了body的点击回调中，无法实现预期效果。你需要阻止的是按钮的点击事件向上冒泡到父级body，所以这段逻辑应该放在按钮的点击回调函数里
• 冗余绑定问题：你每次触发body点击事件都会遍历所有已存在的按钮重新绑定点击事件，会导致同一个按钮被多次绑定回调，属于不必要的性能消耗，只需要在创建新按钮时单独绑定一次即可

document.body.onclick = function(event) {
  const x = event.clientX;
  const y = event.clientY;
  const btn = document.createElement("button");
  btn.style.position = "absolute";
  btn.style.left = x + "px";
  btn.style.top = y + "px";
  btn.innerHTML = "click me";
  btn.className = "buton";

  // 仅给当前新生成的按钮绑定点击事件
  btn.onclick = function(e) {
    // 阻止当前按钮的点击事件冒泡到body
    e.stopPropagation();
    // 计算当前按钮的序号
    const btnList = document.getElementsByClassName("buton");
    const index = Array.from(btnList).indexOf(this) + 1;
    alert("ai apasat butonul" + index);
  }

  document.body.appendChild(btn);
}

点击按钮时，按钮的点击回调会先触发，执行e.stopPropagation()后，事件不会向上传递给body，所以body的点击生成新按钮的逻辑不会执行。只有点击body内没有其他元素的空白区域时，才会触发body的点击事件生成新按钮。

内容的提问来源于stack exchange，提问作者Dragos Polifronie