JavaScript で False を返す

Muhammad Muzammil Hussain 2023年10月12日 JavaScript JavaScript Return
  1. JavaScript での return ステートメント
  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 での return ステートメント

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. Submit ボタンをクリックすると、フォームを送信できなくなります。

JavaScript で Return False メソッドを使用する

Return false は、次の 3つの手順に従います。

  1. ブラウザのデフォルトの動作を停止します。
  2. イベントが DOM を伝播するのを防ぎます。
  3. また、コールバックの実行を停止し、すぐに戻ります。

開発者は、さまざまな場合に return false を使用します。

  1. boolean（true または false）値に依存します。フォームフィールドが空の場合、関数はアラートメッセージを生成します。このメッセージは 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>

上記の例では、preventDefault または return false を使用していないため、前述の Delftstack リンクがブラウザのデフォルトの動作として開きます。

  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() の後のコードは実行されることです。

チュートリアルを楽しんでいますか？ <a href="https://www.youtube.com/@delftstack/?sub_confirmation=1" style="color: #a94442; font-weight: bold; text-decoration: underline;">DelftStackをチャンネル登録</a> して、高品質な動画ガイドをさらに制作するためのサポートをお願いします。 Subscribe

関連記事 - JavaScript Return