在 JavaScript 中返回 False

  2. 貼士文章
  3. JavaScript 貼士
  4. 在 JavaScript 中返回 False
Muhammad Muzammil Hussain 2023年1月30日 2022年5月10日
JavaScript JavaScript Return
  1. JavaScript 中的返回語句
  2. 在 JavaScript 中使用 preventDefault() 方法
  3. 在 JavaScript 中使用 Return False 方法
  4. 在 JavaScript 中何時以及為何使用 return false
  5. JavaScript 中 return false 和 preventDefault() 之間的區別
在 JavaScript 中返回 False

本文將解釋 JavaScript 的 return false 語句、使用它的必要性以及如何在 JavaScript 程式中使用它。它還將解釋 return false 和 preventDefault 語句之間的區別。

JavaScript 中的返回語句

JavaScript return 語句跳過函式的執行並返回到呼叫者函式。return 語句可能返回也可能不返回任何值。

以下是 JavaScript 中簡單的 return 語句的示例。

//  This return statement returns the product of 'x' and 'y'
function myFunction(x, y) 
{
  return x * y;   
}

同樣，我們可以在一個簡單的 JavaScript 函式中返回 true 或 false。

function is_Equal(num1, num2) 
{
    if (num1 == num2)
    {
        return true;
    }
    else 
    {
        return false;
    }
}

在 JavaScript 中使用 preventDefault() 方法

如果該事件是可停止的，則該方法停止該事件，這意味著屬於該事件的預設動作不會發生。它只是阻止預設瀏覽器行為。

我們可以通過多種方式使用 preventDefault() 函式，例如：

  1. 一旦你點選連結，它將阻止連結跟隨 URL。
  2. 如果你點選一個核取方塊，該功能將切換核取方塊。
  3. 如果你點選提交按鈕，它將阻止提交表單。

在 JavaScript 中使用 Return False 方法

Return false 遵循以下三個步驟。

  1. 停止瀏覽器的預設行為。
  2. 它阻止事件傳播 DOM。
  3. 它也停止回撥執行並立即返回。

開發人員在許多不同的情況下使用 return false。

  1. 它依賴於 boolean（真或假）值。如果表單欄位為空，該函式會生成一條警報訊息，該訊息會返回 false，從而阻止提交表單。
// without using preventDefault or return false
<!DOCTYPE html>
<html>

<head>
	<title>
		without PreventDefault( ) or Return false
	</title>
	<script>
		function f_Child() {
			alert('Link Clicked');
		}

		function f_Parent() {
			alert('div Clicked');
		}
	</script>
</head>

<body style="text-align:center;">

	<h1 style="color:green;">
		without PreventDefault( ) or Return false
	</h1>


	<div onclick='f_Parent()'>
		<a href='https://www.delftstack.com/'
		onclick='f_Child()'>Click here to visit delfstack.com</a>
	</div>
	<br>
	<br>
</body>

</html>

在上面的示例中，提到的 Delftstack 連結將作為瀏覽器的預設行為開啟，因為我們沒有使用 preventDefault 或 return false。

  1. 下面的例子表明使用 preventDefault 會改變瀏覽器的預設行為。
// using preventDefault
<!DOCTYPE html>
<html>

<head>
	<title>
		with PreventDefault()
	</title>
	<script>
		function f_Child() 
        {
			event.preventDefault();
			event.currentTarget.innerHTML = 'Click event prevented'
			alert('Link Clicked');
		}

		function f_Parent() 
        {
			alert('div Clicked');
		}
	</script>
</head>

<body style="text-align:center;">

	<h1 style="color:green;">
				using preventDefault
			</h1>

	<div onclick='f_Parent()'>
		<a href='https://www.delftstack.com/'
		onclick='f_Child()'>Click here to visit delftstack.com</a>
	</div>
	<br>
	<br>
</body>

</html>
  1. 在以下示例中，return false 會阻止事件通過 DOM 傳播。
// using return false
<!DOCTYPE html>
<html>

<head>
	<title>
		Return false
	</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body style="text-align:center;">

	<h1 style="color:green;">
			using return false
	</h1>

	<div>
		<a href='https://www.google.com'>Click here to visit google.com</a>
	</div>
	<script>
		$('a').click(function(event) 
        {
			alert('Link Clicked');
			$('a').text('Click event prevented using return FALSE');
			$('a').contents().unwrap();
			return false;
		});
		$('div').click(function(event) 
        {
			alert('Div clicked');
		});
	</script>
	<br>
	<br>
</body>

</html>

因此，使用 return 會導致你的程式碼短路並立即停止執行，並使用 return false 語句來防止發生某些事情。

在 JavaScript 中何時以及為何使用 return false

  1. Return false 語句用於防止某事發生。
  2. 當在函式中呼叫 return false 語句時，該函式的執行將停止。如果指定，則將給定值返回給函式呼叫者。
  3. 在事件處理程式中，如 onsubmit，返回 false 是一種告訴事件不會觸發的方法。因此，在 onsubmit 的情況下，這意味著該表單未提交。

例子：

<!DOCTYPE html>
<html>

<head>
  <title>
	  Return false Statement in JavaScript
  </title>
  <script>
	  function validateForm() 
	{
		  var a = document.forms["myForm"]["fname"].value;
		// use of return false statement if name field is empty
		  if (a == "") 
		{
			  alert("Please enter value in name field");
			  return false;
		  }
	  }
  </script>
</head>

<body style="text-align:center;">
  <h1 style="color: rgb(128, 0, 6);"> 
		  Return False Statement
  </h1>
  <form name="myForm" 
		action="/action_page.php" 
		onsubmit="return validateForm()" 
		method="post">
	  Name:
	  <input type="text" name="fname">
	  <input type="submit" value="Submit">
  </form>
</body>

</html>

JavaScript 中 return false 和 preventDefault() 之間的區別

在 JavaScript 中，return false 和 preventDefault() 都用於停止預設瀏覽器行為，但它們的功能和用途略有不同。

這些語句的主要區別在於 return false 之後的程式碼不會執行，而 preventDefault() 之後的程式碼將執行。

相關文章 - JavaScript Return