如何使用addEventListener()将处理程序分配给HTML表单的Submit按钮,类似于分配按钮的’onclick’属性,而不触发表单的默认commit()行为?
将自定义函数分配给“提交”按钮的“ onclick”属性没有问题。定制函数执行各种步骤,然后创建一个Ajax请求对象,并使用该对象将数据发送到服务器。默认的commit()行为不会触发。
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表单commit()行为。(我可以告诉b / c mySubmit函数将数据发送到与默认URL不同的URL上,但是默认和Ajax url都出现在服务器日志中。)
var func = window['mySubmit']; submitButton.addEventListener('click', func, false);
我知道分配给按钮的函数必须返回’false’,以防止触发默认的commit()行为。我以为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事件-实际上是任何可取消的事件。
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 }