如何使用JavaScript的调用addEventListener（）来覆盖HTML表单的默认提交（）行为 [英] How to use Javascript's addEventListener() to override an HTML Form's default submit() behavior

问题描述

我如何使用的addEventListener（）来为其分​​配处理程序的HTML表单的提交按钮，类似于分配到该按钮的的onclick属性，而不会触发表单的默认提交（）的行为吗？

How can I use addEventListener() to assign a handler to an HTML form's Submit button, similar to assignment to the button's 'onclick' attribute, without triggering the form's default submit() behavior?

我没有问题分配的自定义功能的提交按钮的onclick属性。自定义功能执行的各种步骤，然后创建Ajax请求对象，并使用此将数据发送到服务器。默认提交（）的行为就不会被触发。

I have no trouble assigning a custom function to the 'onclick' attribute of the "Submit" button. The custom function executes a variety of steps, then creates an Ajax request object and uses this to send the data to the server. The default submit() behavior isn't triggered.

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

使用默认的HTML表单一旦Ajax请求对象下，并再次提交（）的行为 -

但随着的addEventListener（），浏览器提交请求的两倍。 （我可以告诉B / C的mySubmit功能将数据发送到一个不同的URL不是默认的 - 但无论是默认和Ajax的网址是出现在服务器日志）

But with addEventListener(), the browser submit the request twice -- once under the Ajax request object, and again with the default HTML form submit() behavior. (I can tell b/c the mySubmit function sends the data to a different URL than the default -- but both the default and the Ajax url are appearing in the server logs.)

var func = window['mySubmit'];
submitButton.addEventListener('click', func, false);

我知道，分配给该按钮的功能必须返回假，以prevent触发默认提交（）的行为。我想mySubmit（）这样做，我也试着写经的addEventListener传递的功能，更明确地返回false（而不是'功能'时，功能（）{mySubmit（）;返回false}），但这些dosn 'T工作的。

I'm aware that the function assigned to the button must return 'false' to prevent triggering the default submit() behavior. I thought mySubmit() did that, and I've tried to write the function passed in via addEventListener to return false more explicitly (instead of 'func', 'function() {mySubmit(); return false}') but these dosn't work either.

那么，如何做到这一点？

So how do I do this?

更新

意见彼得提出的一些浏览器兼容性问题;同时，IE不支持的addEventListener（）。这code解决了这些。我在Firefox和IE 8测试它。

Comments to Peter's raised some browser compatability issues; also, IE doesn't support addEventListener(). This code addresses these. I've tested it in Firefox and 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);
}

道歉凌乱新手格式。

Apologies for the messy newbie formatting.

推荐答案

您需要从执行它的默认行为时，该事件在处理函数，和prevent事件。这适用于点击活动，提交事件 - 真的无论如何这是取消

You need to receive the event in your handler function, and prevent the event from executing its default behavior. This applies to click events, submit events - really any event that's cancelable.

// 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的调用addEventListener（）来覆盖HTML表单的默认提交（）行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！