在 JavaScript 中返回 False
Muhammad Muzammil Hussain
2023年1月30日
2022年5月10日
- 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()
之后的代码将执行。