Question

我正在基于我在网上找到的教程在JS中做一个简单的秒表。我得到了教程代码，然后按照我的方式重新制作。我添加了一些东西，发现我的事件监听器不会触发。一旦我放弃试图找出导致错误的原因，我逐行重写了程序并且它工作正常。然后我意识到我忘记了一行，一旦我添加了它，我找到了罪魁祸首。

该功能只是将按钮添加到div。

  function appendButtons(container) {
      container.appendChild(startButton);
      container.appendChild(stopButton);
      container.appendChild(resetButton);
  }

如果它改为此，它会停止按钮上的监听器工作。

  function appendButtons(container) {
      container.appendChild(startButton);
      container.appendChild(stopButton);
      container.appendChild(resetButton);
      container.innerHTML += "<hr>";
  }

现在，我知道我可能不应该在那里使用 innerHTML ，但它确实在页面上放了一个 hr ，我仍然不知道为什么这对事件监听器有任何影响。

创建按钮的功能如下所示：

function createButton(name) {
    var button = document.createElement("input");
    button.type = "button";
    button.value = name;
    button.addEventListener("click", function(e) {
        console.log("working");
    });
}

顺便说一句，我刚刚改变了这一行并且它有效：

    container.appendChild(document.createElement("hr"));

为什么添加<hr />会停止我的事件监听器？

0 个答案: