JavaScript 阻止表单提交的正确方式：preventDefault 与 returnValue

作者：竹影时间：2026-10-24 17:04:44浏览：324

本文解析在JavaScript中如何正确阻止表单默认提交行为。针对早期代码中通过监听函数返回false无法生效的问题，推荐使用event.preventDefault()标准方法，并补充window.event.returnValue=false以兼容旧版IE浏览器。文章提供了完整的DOM绑定代码示例及W3C标准参考链接。

错误示例：监听函数返回false无效

示例代码如下：

 
<form action="https://www.jb51.net" id="form">
<input type="text" />
<input type="submit" />
</form>
<script>
var code = function () {
return false;
}; 
var element = window.document.getElementById("form");
if (element.addEventListener) {
element.addEventListener("submit", code, false);
} 
</script>

正确实现：使用preventDefault及IE兼容方案

修正后的代码实现如下：

示例代码如下：

 
<form action="https://www.jb51.net" id="form">
<input type="text" />
<input type="submit" id="btnSubmit" name="btnSubmit" value="Submit" />
</form>
<script>
var code = function (eventObject) {
if (eventObject.preventDefault) {
eventObject.preventDefault();
} else if (window.event) /* for ie */ {
window.event.returnValue = false;
} 
return true;
}; 
window.onload = function(){
var element = window.document.getElementById("form");
if (element.addEventListener) {
element.addEventListener("submit", code, false);
} else if (element.attachEvent) {
element.attachEvent("onsubmit", code);
} 
} 
</script>

错误示例：监听函数返回false无效

正确实现：使用preventDefault及IE兼容方案

相关文档参考