在 JavaScript 中返回 False
Muhammad Muzammil Hussain
2023年10月12日
- JavaScript 中的返回语句
-
在 JavaScript 中使用
preventDefault()方法 -
在 JavaScript 中使用
Return False方法 -
在 JavaScript 中何时以及为何使用
return false -
JavaScript 中
return false和preventDefault()之间的区别
本文将解释 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() 之后的代码将执行。