javascript - 如何使用 Javascript 的 addEventListener() 覆盖 HTML 表单的默认 submit() 行为

Question

如何使用 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);
}

对于凌乱的新手格式表示歉意。

Answer 1

您需要在处理函数中接收事件，并阻止事件执行其默认行为。这适用于 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
}