Question

我创建了一个简单的js代码：

var testContainer = document.getElementById("test");
var butt = document.getElementById("test-button");

butt.addEventListener("click", function(){
    var paragraph = document.createElement("p");
    paragraph.innerText = "test";
    testContainer.appendChild(paragraph);
});

使用HTML代码：

<form>
  <div id="test"></div>
  <button id="test-button"> test </button>
</form>

这是 JSFiddle 。

我的问题是为什么当<button>位于<form>内时，我的事件监听器被阻止，而且无法向<div id="test">添加新元素？我不明白为什么它无效。

Answer 1

<强> Working fiddle

由于button位于form内，因此会将其视为submit按钮，因此当您点击按钮时，表单将被提交，然后该事件将不会触发，为避免这种情况，您可以将type='button'添加到按钮中，如：

<button id="test-button" type="button">test</button>

或使用preventDefault()之类的：

butt.addEventListener("click", function(e){
    e.preventDefault();

    var paragraph = document.createElement("p");

    paragraph.innerText = "test";
    testContainer.appendChild(paragraph);
});

希望这有帮助。

Answer 2

您的按钮似乎正在触发要提交的表单，从而刷新页面。尝试将e.preventDefault（）添加到您的点击处理程序，以防止表单提交..

＆＃13;

var testContainer = document.getElementById("test");
var butt = document.getElementById("test-button");
butt.addEventListener("click", function(e) {
  e.preventDefault();
  var paragraph = document.createElement("p");
  paragraph.innerText = "test";
  testContainer.appendChild(paragraph);
});

＆＃13;

<form>
  <div id="test">

  </div>
  <button id="test-button">
test
</button>
</form>

＆＃13;

Answer 3

将按钮类型更改为

type="button"

为什么按钮在窗体内阻止我的事件监听器？

3 个答案: