Renvoyer Faux en JavaScript
- Instructions de retour en JavaScript
-
Utiliser la méthode
preventDefault()en JavaScript -
Utiliser la méthode
Return Falseen JavaScript -
Quand et pourquoi utiliser
return falseen JavaScript -
Différence entre
return falseetpreventDefault()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 :
- Une fois que vous avez cliqué sur le lien, cela empêchera le lien de suivre l’URL.
- Si vous cliquez sur une case à cocher, la fonction basculera la case à cocher.
- 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.
- Il arrête le comportement par défaut du navigateur.
- Il empêche l’événement de propager le DOM.
- 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.
- Il repose sur la valeur
boolean(trueoufalse). 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.
- L’exemple suivant montre que l’utilisation de
preventDefaultmodifiera 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>
- Tandis que dans l’exemple suivant,
return falseempê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
- L’instruction
Return falseest utilisée pour empêcher que quelque chose ne se produise. - Lorsqu’une instruction
return falseest 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. - 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 casonsubmit, 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.