false zurückgeben in JavaScript

  2. How-To's
  3. JavaScript-Anleitungen
  4. false zurückgeben in JavaScript
Muhammad Muzammil Hussain 12 Oktober 2023
JavaScript JavaScript Return
  1. return-Anweisungen in JavaScript
  2. Verwenden die Methode preventDefault() in JavaScript
  3. Verwenden die Methode Return False in JavaScript
  4. Wann und warum Verwenden Sie return false in JavaScript
  5. Unterschied zwischen return false und preventDefault() in JavaScript
false zurückgeben in JavaScript

Dieser Artikel erklärt die return false-Anweisung von JavaScript, die Notwendigkeit, sie zu verwenden, und wie man sie in JavaScript-Programmen verwendet. Außerdem wird der Unterschied zwischen den Anweisungen return false und preventDefault erläutert.

return-Anweisungen in JavaScript

JavaScript-Rückgabeanweisungen überspringen die Ausführung der Funktionen und kehren zur aufrufenden Funktion zurück. Die return-Anweisungen können einen Wert zurückgeben oder auch nicht.

Es folgt ein Beispiel für eine einfache return-Anweisung in JavaScript.

//  This return statement returns the product of 'x' and 'y'
function myFunction(x, y) {
  return x * y;
}

Ebenso können wir in einer einfachen JavaScript-Funktion wahr oder falsch zurückgeben.

function is_Equal(num1, num2) {
  if (num1 == num2) {
    return true;
  } else {
    return false;
  }
}

Verwenden die Methode preventDefault() in JavaScript

Diese Methode stoppt das Ereignis, wenn es stoppbar ist, was bedeutet, dass die zum Ereignis gehörende Standardaktion nicht ausgeführt wird. Es verhindert lediglich das standardmäßige Browserverhalten.

Wir können die Funktion preventDefault() auf viele Arten verwenden, wie zum Beispiel:

  1. Sobald Sie auf den Link klicken, wird verhindert, dass der Link der URL folgt.
  2. Wenn Sie auf ein Kontrollkästchen klicken, schaltet die Funktion das Kontrollkästchen um.
  3. Wenn Sie auf eine Submit-Schaltfläche klicken, wird das Absenden eines Formulars verhindert.

Verwenden die Methode Return False in JavaScript

Return false folgt den folgenden drei Schritten.

  1. Es stoppt das Standardverhalten des Browsers.
  2. Es verhindert, dass das Ereignis das DOM weitergibt.
  3. Es stoppt auch die Callback-Ausführung und kehrt sofort zurück.

Entwickler verwenden den return false in vielen verschiedenen Fällen.

  1. Es stützt sich auf den Wert boolean (wahr oder falsch). Wenn ein Formularfeld leer ist, generiert die Funktion eine Warnmeldung, die false zurückgibt und verhindert, dass das Formular gesendet wird.
// 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>

Im obigen Beispiel wird der erwähnte Delftstack-Link als Standardverhalten des Browsers geöffnet, da wir weder preventDefault noch return false verwendet haben.

  1. Das folgende Beispiel zeigt, dass die Verwendung von preventDefault das Standardverhalten des Browsers ändert.
// 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. Im folgenden Beispiel verhindert return false, dass sich das Ereignis durch das DOM ausbreitet.
// 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>

Die Verwendung von return führt also dazu, dass Ihr Code kurzgeschlossen wird und die Ausführung sofort stoppt, und verwenden Sie die Anweisung return false, um zu verhindern, dass etwas passiert.

Wann und warum Verwenden Sie return false in JavaScript

  1. Die Anweisung Return false wird verwendet, um zu verhindern, dass etwas passiert.
  2. Wenn in einer Funktion eine return false-Anweisung aufgerufen wird, wird die Ausführung dieser Funktion gestoppt. Wenn angegeben, wird ein bestimmter Wert an den Funktionsaufrufer zurückgegeben.
  3. In Event-Handlern wie onsubmit ist die Rückgabe von false eine Möglichkeit zu sagen, dass das Event nicht ausgelöst wird. Im Fall onsubmit würde dies also bedeuten, dass das Formular nicht übermittelt wird.

Beispiel:

<!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>

Unterschied zwischen return false und preventDefault() in JavaScript

In JavaScript werden sowohl return false als auch preventDefault() verwendet, um das standardmäßige Browserverhalten zu stoppen, aber ihre Funktionalitäten und Verwendungen sind etwas anders.

Der Hauptunterschied zwischen diesen Anweisungen besteht darin, dass der Code nach return false nicht ausgeführt wird, während der Code nach preventDefault() ausgeführt wird.

Verwandter Artikel - JavaScript Return