如何使用 addEventListener() 将处理程序分配给 HTML 表单的提交按钮,类似于分配给按钮的“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 表单 submit() 行为。 (我可以告诉 b/c mySubmit 函数将数据发送到与默认 URL 不同的 URL——但是默认 url 和 Ajax url 都出现在服务器日志中。)
var func = window['mySubmit'];
submitButton.addEventListener('click', func, false);
我知道分配给按钮的函数必须返回“false”以防止触发默认的 submit() 行为。我认为 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);
}
对于凌乱的新手格式表示歉意。
最佳答案
您需要在处理函数中接收事件,并阻止事件执行其默认行为。这适用于 click
事件、submit
事件 - 实际上是任何可取消的事件。
// 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
}
关于javascript - 如何使用 Javascript 的 addEventListener() 覆盖 HTML 表单的默认 submit() 行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/1731459/