Question

我有一个简单的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（）方法的目标事件是实际表单还是提交按钮并不重要。

Answer 1

要防止页面刷新，您只需要这个

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

<强> FIDDLE

为什么click事件的preventDefault（）也会阻止我的表单提交？

1 个答案: