如何使用Javascript'；s addEventListener（）重写HTML表单'；s的默认提交（）行为

如何使用addEventListener（）将处理程序分配给HTML表单的Submit按钮（类似于分配给按钮的“onclick”属性），而不触发表单的默认Submit（）行为

我可以将自定义函数分配给“提交”按钮的“onclick”属性。自定义函数执行各种步骤，然后创建一个Ajax请求对象，并使用该对象将数据发送到服务器。不会触发默认的submit（）行为

submitButton.onclick = function() {
    mySubmit();
    return false;
};

function mySubmit() {
   //do stuff
   notTheDefaultUrl = generateNonStandardUrl();
   request = GetStandardAjaxRequestThingamabob();
   request.open("POST", notTheDefaultUrl, true);
   request.onreadystatechange = myHandler;
   request.send(formData);
   return false;
}

但是使用addEventListener（），浏览器提交请求两次——一次在Ajax请求对象下，另一次使用默认的HTML表单提交（）行为。（我可以告诉b/c，mySubmit函数将数据发送到与默认URL不同的URL——但默认URL和Ajax URL都出现在服务器日志中。）

我知道分配给按钮的函数必须返回“false”，以防止触发默认的submit（）行为。我认为mySubmit（）做到了这一点，我尝试编写通过addEventListener传入的函数，以更明确地返回false（而不是'func'，'function（）{mySubmit（）；return false}），但这些都不起作用

那我该怎么做呢

更新

对Peter的评论提出了一些浏览器兼容性问题；此外，IE不支持addEventListener（）。这段代码解决了这些问题。我已经在Firefox和IE8中进行了测试

function func( event ) {
    if ( event.preventDefault ) { event.preventDefault()};  
    event.returnValue = false;  
    // do whatever
}

if (submitButton.addEventListener) {
    submitButton.addEventListener('click', func, false);
}
else {
    submitButton.attachEvent('onclick', func);
}

---

为混乱的新手格式道歉。

处理程序不应该添加为“提交”事件的事件列表器吗

我认为，“click”事件处理程序返回false并不能阻止默认提交行为，这是有道理的。表单提交给两个目标是有意义的

编辑：添加第二段

注释：正如Ken所说，事件监听器应该添加到表单中，而不是按钮中

编辑2：所以我错了。您不应该使用“return false”；但是类似于

event.preventDefault ? event.preventDefault() : event.returnValue = false;

---

您需要在处理程序函数中接收事件，并防止事件执行其默认行为。这适用于

单击

事件，

提交

事件-实际上是任何可取消的事件

// using your example
submitButton.addEventListener('click', func, false);

// here's what func should look like    
function func( event )
{
  if ( event.preventDefault ) event.preventDefault();
  event.returnValue = false;
  // do whatever
}

---

简单方法：将forms onsubmit属性设置为返回false

<form onsubmit="return false;">

现在，如果必须通过javascript分配事件侦听器来完成，那么Peter Bailey给出的答案是理想的

我的表单验证器与您的尝试完全相同。看看这个例子

以及代码库

---

您可能会发现它很方便。

是的，它应该在表单上，而不是按钮上。我喜欢它，我发布了html替代方案，但我更喜欢您发布更好、更干净的解决方案的方式！而且，这不是一个跨浏览器的解决方案。理论上是这样，但对于IE浏览器，您需要使用它们的替代方法来实现相同的行为：）我知道YUI提供了此功能，并负责跨浏览器问题。我为YUI构建的表单验证器可以在需要时防止这种行为，如果您尝试调用preventDefault，IE会抛出一个错误吗@猛禽-谢谢！将答案吸收到这个例子中。

<form onsubmit="return false;">