在 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() 之後的程式碼將執行。