Question

如何使用addEventListener（）为HTML表单的Submit按钮分配处理程序，类似于对按钮的'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 - 但默认和Ajax URL都出现在服务器日志中。）

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

我知道分配给按钮的函数必须返回'false'以防止触发默认的submit（）行为。我认为mySubmit（）做到了这一点，并且我试图通过addEventListener编写传入的函数来更明确地返回false（而不是'func'，'function（）{mySubmit（）; return false}'）但是这些dosn不管怎样。

那我该怎么做？

更新

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

Answer 2

不应该将处理程序添加为“提交”事件的事件列表器吗？

我认为，返回false的“click”事件处理程序不会阻止默认提交行为。将表单提交给两个目标是有道理的。

编辑：添加第二段。

评论：正如肯所说，事件监听器应该添加到表单而不是按钮。

编辑2：所以我错了。你不应该使用“return false;”但有点像......

event.preventDefault ? event.preventDefault() : event.returnValue = false;

Answer 3

EASY WAY：将表单onsubmit属性设置为return false

<form onsubmit="return false;">

现在如果必须通过javascript分配事件监听器，那么Peter Bailey给出的答案是理想的。

我的表单验证器完全符合您的尝试。看看这个例子

http://murdog05.github.com/yui3-gallery/examples/json/beforeSubmitExample.html

代码库

http://yuilibrary.com/gallery/show/formvalidator

你可能会发现它很方便。

如何使用Javascript addEventListener（）来覆盖HTML Form默认的submit（）行为

3 个答案: