JavaScript return false的作用

admin發表於2017-12-04
JavaScriptFalse

在js程式碼中，return false是return語句的一個特列，它不僅僅是返回一個布林值，而且有獨特的作用。

對於有經驗的程式設計師來講肯定不是問題，但是對於js初學者未必有良好的理解和掌握，下面就簡單介紹一下return false語句的作用，先看一段程式碼例項:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" /> 
<title>return false語句的作用-螞蟻部落</title> 
<style type="text/css"> 
a{text-decoration:none;} 
.height{ 
  height:1000px; 
  width:100px; 
  margin:0px auto; 
  background-color:green; 
  color:red; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
  document.getElementById("mytest").onclick=function(){ 
    alert("螞蟻部落歡迎您"); 
  } 
} 
</script> 
</head> 
<body> 
  <div class="height">向下拖動，點選最下方文字</div> 
  <div style="text-align:center"><a href="#" id="mytest">點選彈出提示</a></div> 
</body> 
</html>

注:以上程式碼需要複製到本地測試，在此編輯器無法檢視效果。

以上程式碼我想點選連結後，只是彈出一個提示框，為了防止頁面的跳轉，我們將連結的地址設定為#，不過點選之後的，表現還是和我們所期望的有一點點偏差，儘管彈出了提示框，也沒有出現網頁的跳轉，但是網頁返回了頂部，在大多數情況下，是需要在保持原來位置的，程式碼修改如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>  
<html>  
<head>  
<meta charset=" utf-8">  
<meta name="author" content="http://www.softwhy.com/" /> 
<title>return false語句的作用-螞蟻部落</title> 
<style type="text/css"> 
a{text-decoration:none;} 
.height{ 
  height:1000px; 
  width:100px; 
  margin:0px auto; 
  background-color:green; 
  color:red; 
} 
</style> 
<script type="text/javascript"> 
window.onload=function(){ 
  document.getElementById("mytest").onclick=function(){ 
    alert("螞蟻部落歡迎您"); 
    return false; 
  } 
} 
</script> 
</head> 
<body> 
  <div class="height">向下拖動，點選最下方文字</div> 
  <div style="text-align:center"><a href="#" id="mytest">點選彈出提示</a></div> 
</body> 
</html>

避免了上一段程式碼出現問題，因為在alert語句後面新增了return false。

這裡return語句的作用是阻止預設動作的執行。

相關文章