学习jQuey中的return false

更新时间：2015年12月18日 09:09:26 投稿：lijiao

这篇文章主要介绍了jQuey中的return false作用，以及解决jquery中的return false不起作用的方法，感兴趣的小伙伴们可以参考一下

jQuey中的return false作用是什么？
在众多的语句中都有return false的使用，当然对于熟悉它的开发者来说，当然是知根知底，知道此语句的作用，当然也就知道在什么时候使用此语句，不过对于初学者可能未必掌握的很清晰明了，下面通过实例介绍一下return false语句的作用。
return语句的作用一般是返回函数值，并不再执行下面的语句，直接跳到函数调用的地方，另外还有一个重要的作用，那就是取消默认事件行为的发生。
代码实例如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$("a").click(function(){ 
  return false; 
}) 
}) 
</script> 
</head> 
<body> 
<div id="first"> 
<div id="second"> 
 <a id="third" href=https://www.jb51.net>链接</a> 
</div> 
</div> 
</body> 
</html>

从以上代码可以看出，点击链接之后并没有跳转到https://www.jb51.net首页，这是因为return false能够阻止浏览器的默认行为，比如点击超链接就会实现网页跳转就是浏览器的默认行为。下面再看一个表单验证的例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="https://www.jb51.net/" />
<title>脚本之家</title>
<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
 $(":submit").click(function(){ 
  if($("#username").val()=="") 
  { 
   alert("用户名不能为空!"); 
   $("#username").focus(); 
   return false; 
  } 
  if($("#pw").val()=="") 
  { 
   alert("密码不能为空!"); 
   $("#pw").focus(); 
   return false; 
  } 
 }) 
}) 
</script> 
</head> 
<body> 
<form action="https://www.jb51.net" name="myform"> 
<ul> 
 <li>用户名:<input type="text" id="username" /></li> 
 <li>密码:<input type="password" id="pw" /></li> 
 <li><input type="submit" value="提交表单"></li> 
</ul> 
</form> 
</body> 
</html>

以上代码中，每一个判断语句的最后都添加了return false语句，如果用户名或者密码为空的话，则会弹出提示框，如果没有return false语句的话，那么尽管还能够弹出提示框，但是表单依然会被提交，因为点击提交表单就是点击提交按钮的默认事件行为。

那为什么jquery中的return false不起作用，有什么解决方法？

写了个表单验证js代码如下：

function CheckUserName(){
    var username = $("#username").val();
    $.get("b.php",{ name:username},
      function (data){
        if(data == 1){
          $("#warnning").html("<font color=#FF3300>Account is used.</font>");
          return false;  //为啥不管用捏？
        } else {
          $("#warnning").html("<font color=#00CC66>You can register.</font>");
          return true;  //为啥不管用捏？
        }
      }
    );
  }

原因：逻辑没弄清楚，要将ajax设置为同步的，需要使用$.ajax，$.get默认是异步的，并且不是在回调函数内return，而是在CheckUserName函数中声明一个变量来接受回调函数的返回值，然后CheckUserName返回这个值。
修改后的代码：　

　function CheckUserName(){
    var username = $("#username").val();
    var result=false;
    $.ajax({async:false//要设置为同步的，要不CheckUserName的返回值永远为false
        ,url:'b.php',data:{name:username}
        ,success:function(data){
        if(data == 1){
          $("#warnning").html("<font color=#FF3300>Account is used.</font>");
          result=false;
        } else {
          $("#warnning").html("<font color=#00CC66>You can register.</font>");
          result=true;
        }
    }});
    return result;//==========这里才是CheckUserName的返回值，回调函数返回值没有意义
  }

OK! 测试一下，没问题了！

js/jquery中什么时候用return，什么时候用return false？这也是大家疑惑的地方。

根本的说 return 是函数的返回结果用，如果你一个函数需要执行结果那就return 你需要的结果，不需要结果就不用return；
而在jq中有些特殊的用法，比如$().each(function(){return false;})；
其中如果不return false就会循环所有元素，而如果在其中一次return false则不在进行后续的遍历，跳出循环。

以上就是针对jQuey中的return false进行的详细学习，希望对大家的学习有所帮助。

您可能感兴趣的文章:

js左侧多级菜单动态的解决方案
实现的效果很简单，就是点一下显示，再点一下就隐藏，只不过是多了几级的问题。好，现在来说说我的设计思路，首先从第一级别开始，添加如下代码
2010-02-02
鼠标右击事件代码(asp.net后台)
本程序由一个js文件和aspx文件组成，没有后台CS代码。
2011-01-01
JS实现的tab切换选项卡效果示例
这篇文章主要介绍了JS实现的tab切换选项卡效果,结合具体实例形式分析了JS通过鼠标事件触发自定义函数控制页面元素样式变换实现tab切换功能的相关实现技巧,需要的朋友可以参考下
2017-02-02
js 取消页面可以选中文字的功能方法
下面小编就为大家分享一篇js 取消页面可以选中文字的功能方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-01-01
JavaScript 中级笔记第二章
对象是组成JavaScript的基本单元。本章将从JavaScript语言中最重要的几个部分开始介绍：引用，函数重载，作用域，闭包和上下文。有了这些知识后，面向对象开发就将变得简单。
2009-09-09
实用javaScript技术-屏蔽类
实用javaScript技术-屏蔽类...
2006-08-08
js和as的稳定传值问题解决
最近在实现flash的播放音乐的功能，这就涉及到js和as交互的问题，因为要实现动态改变音乐文件的功能,可是如何判定呢？
2013-07-07
js获取随机颜色值的函数
随机颜色如何获取，在本文将为大家介绍下如何使用js来获取，感兴趣的朋友可以参考下
2013-09-09
JavaScript实现商品放大镜效果
这篇文章主要为大家详细介绍了JavaScript实现商品放大镜效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
这篇文章主要介绍了JavaScript模拟可展开、拖动与关闭的聊天窗口,实例分析了javascript实现可拖动的div层相关技巧,非常具有实用价值,需要的朋友可以参考下
2015-05-05