javascript - 单击正文内的按钮时，如何停止正文中的事件？

Question

所以我想在单击正文时创建按钮，但是当我单击该正文内的按钮时，我不想创建另一个按钮。那么我应该如何处理呢？我尝试使用 stoppropagation 但无法正常工作

           /*  var body = document.getElementsByTagName("body")[0];*/

           document.body.onclick = function(event) {
                   var x = event.clientX;
                   var y = event.clientY;
                   var btn = document.createElement("button");
                   btn.style.position = "absolute";
                   btn.style.left = x + "px";
                   btn.style.top = y + "px";
                   btn.innerHTML = "click me";
                   document.body.appendChild(btn);
                   btn.className = "buton";
                   event.stopPropagation;
                   var butoane = document.getElementsByClassName("buton");
                   for (let i = 0; i < butoane.length; i++) {
                       butoane[i].onclick = function() {
                           alert("ai apasat butonul" + (i + 1));

                       }

                   }
               }

标签： javascriptevent-handlingdom-events

Answer 1

event.stopPropagation是一个函数，你需要调用它，event.stopPropagation()但无论如何，这不会满足你的需求。您可以忽略对您创建的按钮的点击，如下所示：

document.body.onclick = function(event) {
  if (event.target.classList.contains('buton')) {
    return;
  }
  var x = event.clientX;
  var y = event.clientY;
  var btn = document.createElement("button");
  btn.style.position = "absolute";
  btn.style.left = x + "px";
  btn.style.top = y + "px";
  btn.innerHTML = "click me";
  document.body.appendChild(btn);
  btn.className = "buton";
  event.stopPropagation;
  var butoane = document.getElementsByClassName("buton");
  for (let i = 0; i < butoane.length; i++) {
    butoane[i].onclick = function() {
      alert("ai apasat butonul" + (i + 1));

    }

  }
}

<button>Button</button>

它的作用是检查单击的元素是否具有buton类，如果有，则返回（不要运行生成按钮的代码）。

此外，您可以改进这一点，而不是转到您创建的每个按钮来重置它的onclick侦听器，您可以执行以下操作：

btn.onclick = function() {
  alert("ai apasat butonul" + butoane.length);
}