如何使用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屋!