jQuey return false作用是什麼

admin發表於2017-11-01
False

在眾多的語句中都有return false的使用，當然對於熟悉它的開發者來說，當然是知根知底，知道此語句的作用，當然也就知道在什麼時候使用此語句，不過對於初學者可能未必掌握的很清晰明瞭，下面通過例項介紹一下return false語句的作用。

return語句的作用一般是返回函式值，並不再執行下面的語句，直接跳到函式呼叫的地方，另外還有一個重要的作用，那就是取消預設事件行為的發生。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!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="http://www.softwhy.com">連結</a> 
</div> 
</div> 
</body> 
</html>

從以上程式碼可以看出，點選連結之後並沒有跳轉到www.softwhy.com首頁，這是因為return false能夠阻止瀏覽器的預設行為，比如點選超連結就會實現網頁跳轉就是瀏覽器的預設行為。下面再看一個表單驗證的例子：

[HTML] 純文字檢視 複製程式碼
<!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(){ 
  $(":submit").click(function(){ 
    if($("#username").val()=="") 
    { 
      alert("使用者名稱不能為空!"); 
      $("#username").focus(); 
      return false; 
    } 
    if($("#pw").val()=="") 
    { 
      alert("密碼不能為空!"); 
      $("#pw").focus(); 
      return false; 
    } 
  }) 
}) 
</script> 
</head> 
<body> 
<form action="http://www.softwhy.com" 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語句的話，那麼儘管還能夠彈出提示框，但是表單依然會被提交，因為點選提交表單就是點選提交按鈕的預設事件行為。

相關文章