JavaScript return false

admin發表於2018-10-30
原文網址 : https://www.softwhy.com/article-9470-1.html
JavaScriptFalse

return 語句只能存在於函式中，具體參閱JavaScript return 語句一章節。

函式返回false在很多上下文具有特殊意義，所以單獨對其做一下介紹。

一.作為普通資料返回：

皇帝雖然至高無上，但是也有與民同樂的時候。

雖然return false有時具有特殊意義，但有時也很單純，作用就是返回false本身。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function func(a,b){
  if(a>b){
      return true
  }else{
      return false
  }
}
console.log(func(3,4));

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201810/30/150910njdfadlfuv0j2abv.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上述程式碼沒有其他意思，就是希望返回值為true或者false。

二.取消預設行為：

預設行為很好理解，比如扣動扳機，子彈會發射出去，子彈發射就是預設行為。

引申到web，點選表單提交按鈕，那麼提交表單就是預設行為，點選連結，連結跳轉就是預設行為。

return false可以阻止這些預設行為，程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>螞蟻部落</title>
<style type="text/css">
#link{
    width:100px;
    height:30px;
    display:block;
    text-align:center;
    line-height:30px;
    background:#ccc;
}
</style>
<script>
window.onload=function(){
  let olink=document.getElementById("link");
  olink.onclick=function(){
    return false;
  }
}
</script>
</head>
<body>
<a id="link" href="http://www.softwhy.com">螞蟻部落</a>
</body>
</html>

點選超連結，原本會跳轉到螞蟻部落首先，現在這個跳轉動作喪失，也就是預設行為沒了。

還有兩個比較常用的場景：

（1）.表單驗證驗證失敗，事件處理函式返回false，否則即便是驗證失敗，也會有表單提交動作。

（2）.自定義右鍵選單，可以將contextmenu事件處理函式返回值設定為false，否則點選滑鼠右鍵時，自定義選單和預設的選單會一同展現出來，這並不是我們所期望的。

歸根節點，理解預設動作是關鍵，所以遇到一些特殊的用法，多往這方面想想。

三.return false阻止預設動作缺陷：

可以認為return false阻止瀏覽器預設行為是是return 語句的一個副業。

preventDefault方法才是阻止預設動作的"專業人士"，參閱JavaScript preventDefault()一章節。

return false在通過addEventListener註冊的事件處理中無法阻止預設行為。

具體參閱preventDefault()與return false區別一章節。

相關文章