在 JavaScript 中返回 False

当前位置：主页 > 学无止境 > WEB前端 > JavaScript >

Vue React JavaScript Angular CSS HTML

在 JavaScript 中返回 False

作者：迹忆客最近更新：2024/03/21 浏览次数：

本文将解释 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() 函数，例如：

一旦你点击链接，它将阻止链接跟随 URL。
如果你点击一个复选框，该功能将切换复选框。
如果你点击提交按钮，它将阻止提交表单。

在 JavaScript 中使用 `Return False` 方法

Return false 遵循以下三个步骤。

停止浏览器的默认行为。
它阻止事件传播 DOM。
它也停止回调执行并立即返回。

开发人员在许多不同的情况下使用 return false。

它依赖于 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。

下面的例子表明使用 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>

在以下示例中，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`

Return false 语句用于防止某事发生。
当在函数中调用 return false 语句时，该函数的执行将停止。如果指定，则将给定值返回给函数调用者。
在事件处理程序中，如 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 将 HTML 表格导出到 Excel

下一篇：在 JavaScript 中复制 Python Stripe 方法

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

Do you understand JavaScript closures?

发布时间：2025/02/21 浏览次数：108 分类：JavaScript

The function of a closure can be inferred from its name, suggesting that it is related to the concept of scope. A closure itself is a core concept in JavaScript, and being a core concept, it is naturally also a difficult one.

Do you know about the hidden traps in variables in JavaScript?

发布时间：2025/02/21 浏览次数：178 分类：JavaScript

Whether you're just starting to learn JavaScript or have been using it for a long time, I believe you'll encounter some traps related to JavaScript variable scope. The goal is to identify these traps before you fall into them, in order to av

How much do you know about the Prototype Chain?

发布时间：2025/02/21 浏览次数：150 分类：JavaScript

The prototype chain can be considered one of the core features of JavaScript, and certainly one of its more challenging aspects. If you've learned other object-oriented programming languages, you may find it somewhat confusing when you start

jQuery 中的日期选择器

发布时间：2024/03/24 浏览次数：99 分类：JavaScript

本文将讨论使用 jQuery UI 库的 jQuery 中的 Datepicker。

用 jQuery 检查复选框是否被选中

发布时间：2024/03/24 浏览次数：102 分类：JavaScript

在本教程中学习 jQuery 检查复选框是否被选中的所有很酷的方法。我们展示了使用直接 DOM 操作、提取 JavaScript 属性的 jQuery 方法以及使用 jQuery 选择器的不同方法。你还将找到许多有用的

jQuery 中的 $.Ajax 数据类型

发布时间：2024/03/24 浏览次数：133 分类：JavaScript

本教程演示了在 jQuery 中使用 $.ajax 数据类型。

在 jQuery 中检查字符串是否包含子字符串

发布时间：2024/03/24 浏览次数：106 分类：JavaScript

本教程演示了如何在 jQuery 中使用 contains() 方法。

在 jQuery 中检查和取消检查复选框

发布时间：2024/03/24 浏览次数：94 分类：JavaScript

本文演示了如何使用 jQuery 选中和取消选中复选框。

jQuery 中的 Window.onload 与 $(document).ready

发布时间：2024/03/24 浏览次数：180 分类：JavaScript

本教程演示了如何在 jQuery 中使用 Window.onload 和 $(document).ready 事件。

迹忆客专注技术分享