为什么表单内的按钮会阻止我的事件监听器？ [复制]答案

【问题标题】：Why button inside form block my event listener? [duplicate]为什么表单内的按钮会阻止我的事件监听器？ [复制]
【发布时间】：2017-10-18 20:14:28
【问题描述】：

我已经创建了一个简单的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"> 添加新元素？我不明白为什么它无效。

【问题讨论】：

标签： javascript html forms

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

希望这会有所帮助。

【讨论】：

【解决方案2】：

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

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);
});

<form>
  <div id="test">

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

【讨论】：

【解决方案3】：

将按钮的类型更改为

type="button"

【讨论】：