Renvoyer Faux en JavaScript

  2. HowTo
  3. JavaScript Howtos
  4. Renvoyer Faux en JavaScript
Muhammad Muzammil Hussain 12 octobre 2023
JavaScript JavaScript Return
  1. Instructions de retour en JavaScript
  2. Utiliser la méthode preventDefault() en JavaScript
  3. Utiliser la méthode Return False en JavaScript
  4. Quand et pourquoi utiliser return false en JavaScript
  5. Différence entre return false et preventDefault() en JavaScript
Renvoyer Faux en JavaScript

Cet article explique l’instruction return false de JavaScript, la nécessité de l’utiliser et comment l’utiliser dans les programmes JavaScript. Il expliquera également la différence entre les déclarations return false et preventDefault.

Instructions de retour en JavaScript

Les instructions return JavaScript ignorent les exécutions des fonctions et retournent à la fonction appelante. Les instructions return peuvent ou non renvoyer une valeur.

Voici un exemple d’instruction de retour simple en JavaScript.

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

De même, nous pouvons retourner true ou false dans une simple fonction JavaScript.

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

Utiliser la méthode preventDefault() en JavaScript

Cette méthode arrête l’événement s’il peut être arrêté, ce qui signifie que l’action par défaut qui appartient à l’événement ne se produira pas. Cela empêche simplement le comportement par défaut du navigateur.

Nous pouvons utiliser la fonction preventDefault() de plusieurs manières, comme :

  1. Une fois que vous avez cliqué sur le lien, cela empêchera le lien de suivre l’URL.
  2. Si vous cliquez sur une case à cocher, la fonction basculera la case à cocher.
  3. Si vous cliquez sur un bouton Submit, cela empêchera la soumission d’un formulaire.

Utiliser la méthode Return False en JavaScript

Return false suit les trois étapes suivantes.

  1. Il arrête le comportement par défaut du navigateur.
  2. Il empêche l’événement de propager le DOM.
  3. Il arrête également l’exécution du rappel et revient immédiatement.

Les développeurs utilisent le return false dans de nombreux cas différents.

  1. Il repose sur la valeur boolean (true ou false). Si un champ de formulaire est vide, la fonction génère un message d’alerte, qui renvoie faux, empêchant la soumission du formulaire.
// 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>

Dans l’exemple ci-dessus, le lien Delftstack mentionné s’ouvrira comme comportement par défaut du navigateur car nous n’avons pas utilisé preventDefault ou return false.

  1. L’exemple suivant montre que l’utilisation de preventDefault modifiera le comportement par défaut du navigateur.
// 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. Tandis que dans l’exemple suivant, return false empêche l’événement de se propager à travers le 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>

Ainsi, l’utilisation de return provoque le court-circuit de votre code et l’arrêt immédiat de l’exécution, et l’utilisation de l’instruction retourner faux pour empêcher que quelque chose ne se produise.

Quand et pourquoi utiliser return false en JavaScript

  1. L’instruction Return false est utilisée pour empêcher que quelque chose ne se produise.
  2. Lorsqu’une instruction return false est appelée dans une fonction, l’exécution de cette fonction est stoppée. Si spécifié, une valeur donnée est renvoyée à l’appelant de la fonction.
  3. Dans les gestionnaires d’événements, comme onsubmit, renvoyer false est un moyen de dire que l’événement ne se déclenchera pas. Ainsi, dans le cas onsubmit, cela signifierait que le formulaire n’est pas soumis.

Exemple:

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

Différence entre return false et preventDefault() en JavaScript

En JavaScript, return false et preventDefault() sont utilisés pour arrêter le comportement par défaut du navigateur, mais leurs fonctionnalités et utilisations sont légèrement différentes.

La principale différence entre ces instructions est que le code après return false ne s’exécutera pas, tandis que le code après preventDefault() s’exécutera.

Article connexe - JavaScript Return