html行为只触发一次,如何使用Javascript的addEventListener（）来覆盖HTML窗体的默认提交（）行为...

如何使用addEventListener()为HTML窗体的Submit按钮分配处理程序，类似于按钮的onclick属性触发表单的默认submit()行为？如何使用Javascript的addEventListener()来覆盖HTML窗体的默认提交()行为

我毫不费力地给“提交”按钮的'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不是默认的 - 但无论是默认和Ajax的URL都出现在服务器日志。)

var func = window['mySubmit'];

submitButton.addEventListener('click', func, false);

我知道，分配给按钮的函数必须返回'false'以防止触发默认的submit()行为。我认为mySubmit()这样做，我试图写入通过addEventListener传入的函数，以更明确地返回false(而不是'func'，'function(){mySubmit(); return false}')，但是这些dosn也不行。

那么我该如何做到这一点？

UPDATE

评论彼得的提出了一些浏览器兼容性问题;另外，IE不支持addEventListener()。此代码解决了这些问题我已经在Firefox和IE 8中对它进行了测试。

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

}

对于混乱的新手格式化道歉。