为什么单击事件的 preventDefault() 也会阻止我的表单提交？答案

【问题标题】：Why does preventDefault() of a click event also prevent my form from submitting?为什么单击事件的 preventDefault() 也会阻止我的表单提交？
【发布时间】：2014-04-25 05:27:04
【问题描述】：

我有一个简单的 HTML 表单：

<form name="form" id="form" method="post" action="">
    <label for="input_text"><span>Input Text:</span></label>
    <input type="text" name="input_text" />
    <input type="submit" name="submit" value="Submit" />
</form>

然后我阻止了默认的点击动作，因为我想使用 AJAX 来处理提交而不是常规的方法。

// prevent page refresh
var form = document.getElementById('form');
function stopDefault(event) {
    event.preventDefault();
}
form.addEventListener('click', stopDefault, false);

但是这会导致一些意外的行为。

如果我获得了提交按钮并为其创建了一个匿名 onclick 函数，即使当光标位于表单字段内时通过按 Enter 提交表单，onclick 函数也会触发，即它也会被 触发没有点击提交。这是一个例子：

var button = form.submit;
button.onclick = function() {
    console.log('clicked');
}

奇怪的是，这个 onclick 函数也会捕获非点击表单提交。另一方面，如果我尝试捕获实际的表单提交...

form.onsubmit = function() {
    console.log("submitted");
}

...它不会触发！

这是为什么呢？

对我来说，处理表单输入 onsubmit 而不是 onclick 似乎更合乎逻辑，但我想这不是它的工作原理。

另外，附带说明一下，有趣的是 preventDefault() 方法的目标事件是实际表单还是提交按钮并不重要。

【问题讨论】：

标签： javascript ajax forms

【解决方案1】：

为了防止页面刷新，你只需要这个

// prevent page refresh
var form = document.getElementById('form');
form.onsubmit = function() {
  console.log("submitted");
  return false; // this prevents page refresh
}

FIDDLE

【讨论】：

那么为什么 form.onsubmit 在 preventDefault 运行时不触发呢？除了让我使用 form.onsubmit 函数之外，这还有什么比 preventDefault 更好的呢？
因为要提交，所以需要点击。而你所说的 preventDefault inside click function 这意味着 无论这个点击会触发什么，都不要这样做，这意味着在按钮点击时提交表单。即使在 from 元素中按 enter 也会触发点击操作，因为它会导致提交按钮点击。