html表单提交默认行为,如何使用Javascript的addEventListener（）覆盖HTML表单的默认commit（）行为...

如何使用addEventListener()将处理程序分配给HTML表单的Submit按钮，类似于分配按钮的’onclick’属性，而不触发表单的默认commit()行为？

将自定义函数分配给“提交”按钮的“

onclick”属性没有问题。定制函数执行各种步骤，然后创建一个Ajax请求对象，并使用该对象将数据发送到服务器。默认的commit()行为不会触发。

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表单commit()行为。(我可以告诉b / c

mySubmit函数将数据发送到与默认URL不同的URL上，但是默认和Ajax url都出现在服务器日志中。)

var func = window['mySubmit'];

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

我知道分配给按钮的函数必须返回’false’，以防止触发默认的commit()行为。我以为mySubmit()做到了这一点，并且我尝试编写通过addEventListener传入的函数以更明确地返回false(而不是’func’，’function(){mySubmit();

return false}’)，但是这些dosn也不行。

那么我该怎么做呢？

更新

对Peter的评论提出了一些浏览器兼容性问题。另外，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);

}

不好意思的新手格式化。