不使用 jQuery 提交表单时不要重新加载页面答案

【问题标题】：Don't reload page when submitting form without jQuery不使用 jQuery 提交表单时不要重新加载页面
【发布时间】：2011-02-15 23:41:31
【问题描述】：

我一直在尝试增强我的 javascript 能力，因此我尝试使用 AJAX sans jQuery 提交表单。由于某种原因，我似乎不可能使用 addEventListener(); 来停止使用 javascript 提交表单。

window.addEventListener('load', function(){
    document.forms[0].addEventListener('submit', function(){
        send();
        return false;
    }, false);
}, false);

这段代码 - 与我尝试交换 return false; 和函数调用顺序的任何方式无关 - 不会阻止表单提交，也不会 return send() ;（自然返回 false）或 returnValue=false;。

当使用 return false; 在内联事件侦听器中时，我能够阻止页面重新加载和表单提交默认方式，但我必须使用它吗？有什么想法吗？

【问题讨论】：

有什么理由不能使用 jQuery 或其他库？
嗯，在生产中，不是真的。但我只是想了解一下 jQuery 如何在使用原生 javascript 似乎很难做到这一点时实现这一点......

标签： javascript javascript-events

【解决方案1】：

你用的是什么浏览器？ IE 9 之前的 IE 不支持 addEventListener。

另外，您必须运行 .preventDefault() 和 .stopPropagation()。

另外，在页面的所有内容（包括图像和所有内容）加载之前，load 事件不会触发，因此当您提交表单时，您的处理程序可能尚未注册。

顺便说一句，使用 jQuery 会是：

$(function(){
  $('form').submit(function(){
    send();
    return false;
  });
});

它会在 DOM 准备好后立即注册处理程序，并且可以在 IE 中工作。

【讨论】：

是的，我知道，我正在使用 Chrome 和 Firefox
删除了我的最后一个到 cmets，看起来，不是 IE 的浏览器默认传递事件，所以只需执行 addEventListener('submit', send, false);function send(evt){evt.preventDefault();} 即可。但是 IE 是另一回事，我遇到了一些问题，因为当我执行 function send(evt){ if (evt.preventDefault){evt.preventDefault();} else {window.event.returnValue=false;} 时会停止函数执行，因此事件在 IE 中被取消，但它也没有做任何其他事情......