在 JavaScript 中返回 False

Muhammad Muzammil Hussain 2023年10月12日 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() 之后的代码将执行。

Enjoying our tutorials? Subscribe to DelftStack on YouTube to support us in creating more high-quality video guides. Subscribe

相关文章 - JavaScript Return