JavaScript中return false阻止表单提交的原理与常见误区

JavaScript中return false阻止表单提交的原理与常见误区

在使用JavaScript处理表单提交时，经常遇到return false无法阻止提交的情况。这个问题曾困扰许多开发者，经过查阅相关资料，总结出以下关键注意事项。

return语句的返回值机制

首先需理解return语句的返回值机制。在函数中，一旦执行到return语句并返回结果，后续代码将不再执行，控制流直接返回至调用处。例如在PHP或JS函数中，若第一个if条件满足并返回布尔值false，函数即终止执行。只要遇到return，程序就会在该行停止，立即返回到调用该函数的代码位置。

 
function chkinput(form)
{ 
if(form.title.value=="")
{ 
alert("请输入文章标题!");
form.title.select();
return false; //注意不能写成 return(false); 2009.12.15
} 
if(form.content.value=="")
{ 
alert("文章正文不能为空@！!");
form.content.select();
return false;
} 
return true;
} 

form的onsubmit属性触发机制

其次，form标签的onsubmit属性触发机制也是关键。onsubmit事件在表单确认按钮被点击时触发。若不触发，通常有以下原因：

A. onsubmit属性的触发时机依赖于使用input:submit类型的按钮进行提交。若使用普通input:button，需在onclick属性中指定JavaScript函数，并在该函数内调用form的submit()方法，而非依赖onsubmit属性。

B. 参考以下代码示例：

 
<form action="index.jsp" method="post" onsubmit="submitTest();">
<INPUT value="www">
<input type="submit" value="submit">
</form><SCRIPT LANGUAGE="JavaScript">
<!-- 
function submitTest() {
// 一些逻辑判断 return false;
} 
//--></SCRIPT>

点击submit按钮时，表单并未提交。问题在于代码应修改为（红色字体部分）：<form action="index.jsp" method="post" onsubmit="return submitTest();">

原理解释：onsubmit属性类似于HTML对象<form>的一个方法名，其值（字符串）即为方法体，默认返回true。

与Java类似，在该方法体中可编写任意多条语句，包括内置函数和自定义函数。

在此例中，submitTest()虽然返回false，但仅执行了该函数，未对其返回值进行任何处理。

而使用onsubmit="return submitTest()"则利用了函数的返回值，从而达到了预期效果。

事件处理函数返回false的作用

第三，关于事件处理函数返回false的作用。在大多数情况下，为事件处理函数返回false可以防止默认的事件行为。

例如，默认情况下点击<a>元素，页面会跳转至该元素href属性指定的页面。

Return False相当于终止符，Return True相当于执行符。

在JavaScript中，return false的主要作用是取消默认动作。例如，点击链接时除了触发onclick事件（若已指定），还会触发默认事件即页面跳转。因此，若要取消对象的默认动作，可使用return false。

return false的应用场景较多，

具体示例代码如下：

 
<body>
1， <a href="/" mce_href="/" onclick='test();'>超级链接 </a>
2， <input type="button" onclick='test()' value="提交">
3， <form name="form1" onsubmIT="return test();">
内容
<input type="submIT" value="提交">
</form>
</body>
<input type="submit" onclick="submitAction(); return false;" />
submitAction方法内部包含提交表单的动作。若不加return false，

在执行完submitAction后，submit按钮仍会执行其默认事件，导致表单再次提交。这往往是许多错误的根源。

确实，return false的含义并非阻止事件向顶层元素传播，而是阻止浏览器对事件的默认处理。可通过以下实验验证：

首先注释所有JS脚本，在IE浏览器中尝试拖动图片，会发现鼠标变为禁止操作样式，图片不可拖动，这是浏览器针对mousemove事件提供的默认行为。

return false旨在去除这种行为，否则会出现中断事件连续执行的情况。

此外，与return false等效的语句为：

window.event.returnValue = false，

可将return false替换为此语句进行验证。

最后说明，此方式仅适用于IE浏览器。

在JavaScript中，return false的主要作用是取消默认动作。例如，点击链接时除了触发onclick事件（若已指定），还会触发默认事件即页面跳转。因此，若要取消对象的默认动作，可使用return false。

return false的应用场景较多，

具体示例代码如下：

 
<form name="form1" onsubmit="return youfunction();">...... </form>
<a href="www.***.com" onclick="...;return false;">dddd </a>