web-dev-qa-db-fra.com

Quand utiliser PreventDefault () vs Return false?

Tout d'abord, dans le modèle d'événement de JavaScript, vous rencontrerez un concept appelé "événement bouillonnant" (qui fait qu'un événement se propage d'un élément enfant à un élément parent). Afin d'éviter ce type d'effet bouillonnant, de nombreux développeurs utilisent une méthode d'événement appelée stopPropagation( ). Les développeurs ont également commencé à utiliser l'instruction return false Pour arrêter cette propagation. Maintenant, il existe une autre terminologie appelée preventDefault( ). Comme son nom l'indique, cette méthode empêche tout comportement par défaut d'un élément à déclencher. Le meilleur cas d'utilisation consiste à empêcher une balise d'ancrage d'ouvrir un lien.

Vous pouvez rencontrer un scénario dans lequel vous souhaitez empêcher la balise d'ancrage d'ouvrir un lien (comportement par défaut) et d'empêcher que l'événement ne soit transmis au parent. Dans une telle situation, au lieu d’écrire deux lignes de code, vous pouvez le faire en une seule ligne, c.-à-d. return false

javascriptpreventdefault
58
Mike

retourne faux;

return false; Fait 3 choses distinctes quand vous l'appelez:

  1. event.preventDefault() - Arrête le comportement par défaut du navigateur.
  2. event.stopPropagation() - Il empêche l'événement de propager (ou de "faire bouillonner") le DOM.
  3. Arrête l'exécution du rappel et retourne immédiatement lorsqu'il est appelé.

Notez que ce comportement diffère des gestionnaires d'événements normaux (non jQuery), dans lesquels, notamment, return false N'empêche pas la propagation de l'événement.

preventDefault ();

preventDefault(); fait une chose: il arrête le comportement par défaut des navigateurs.

Quand les utiliser?

Nous savons ce qu'ils font mais quand les utiliser? Cela dépend simplement de ce que vous voulez accomplir. Utilisez preventDefault(); si vous voulez empêcher simplement le comportement par défaut du navigateur. Utilisez return false; lorsque vous souhaitez empêcher le comportement du navigateur par défaut et empêcher l’événement de propager le DOM. Dans la plupart des cas, vous utiliseriez return false; ce que vous voulez vraiment, c'est preventDefault().

Exemples:

Essayons de comprendre avec des exemples:

Nous allons voir exemple pur JAVASCRIPT

Exemple 1:

<div onclick='executeParent()'>
  <a href='http://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    alert('Link Clicked');
  }

  function executeParent() {
    alert('div Clicked');
  }
</script>

Exécutez le code ci-dessus, vous verrez le lien hypertexte 'Cliquez ici pour visiter stackoverflow.com' maintenant si vous cliquez sur ce lien en premier, vous obtiendrez l'alerte javascript lien cliqué Suivant recevra l'alerte javascript div clicked et immédiatement vous serez redirigé vers stackoverflow.com.

Exemple 2:

<div onclick='executeParent()'>
  <a href='http://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.preventDefault();
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
  }

  function executeParent() {
    alert('div Clicked');
  }
</script>

Exécuter le code ci-dessus, vous verrez le lien hypertexte 'Cliquez ici pour visiter stackoverflow.com' maintenant si vous cliquez d'abord sur ce lien, vous obtiendrez l'alerte javascript lien cliqué Ensuite, vous obtiendrez l'alerte javascript - div clicked Ensuite, vous verrez le lien hypertexte 'Cliquez ici pour visiter stackoverflow.com' remplacé par le texte 'Evénement clic empêché' et vous serez non redirigé vers stackoverflow.com. Ceci est dû à la méthode event.preventDefault () utilisée pour empêcher le déclenchement de l'action de clic par défaut.

Exemple 3:

<div onclick='executeParent()'>
  <a href='http://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.stopPropagation();
    event.currentTarget.innerHTML = 'Click event is going to be executed'
    alert('Link Clicked');
  }

  function executeParent() {
    alert('div Clicked');
  }
</script>

Cette fois, si vous cliquez sur Lien, la fonction executeParent () ne sera pas appelée et vous ne recevrez pas l’alerte javascript div clicked cette fois. Ceci est dû au fait que nous avons empêché la propagation à la div parente en utilisant la méthode event.stopPropagation (). Ensuite, vous verrez le lien hypertexte "Cliquez ici pour visiter stackoverflow.com" "remplacé par le texte" L'événement Click va être exécuté "et vous serez immédiatement redirigé vers stackoverflow.com. En effet, nous n’avons pas empêché l’action de clic par défaut de déclencher cette fois-ci avec la méthode event.preventDefault ().

Exemple 4:

<div onclick='executeParent()'>
  <a href='http://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.preventDefault();
    event.stopPropagation();
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
  }

  function executeParent() {
    alert('Div Clicked');
  }
</script>

Si vous cliquez sur le lien, la fonction executeParent () ne sera pas appelée et vous ne recevrez pas l'alerte javascript. Ceci est dû au fait que nous avons empêché la propagation à la div parente en utilisant la méthode event.stopPropagation (). Ensuite, vous verrez le lien hypertexte "Cliquez ici pour visiter stackoverflow.com" "remplacé par le texte" Evénement de clic empêché "et vous ne serez pas redirigé vers stackoverflow.com. En effet, nous avons empêché l'action de clic par défaut de déclencher cette heure à l'aide de la méthode event.preventDefault ().

Exemple 5:

Pour return false, j'ai trois exemples et tous semblent faire exactement la même chose (mais je ne retourne que faux), mais en réalité, les résultats sont très différents. Voici ce qui se passe réellement dans chacun de ces domaines.

cas:

  1. Renvoyer false à partir d'un gestionnaire d'événements en ligne empêche le navigateur de naviguer vers l'adresse du lien, mais n'empêche pas l'événement de se propager via le DOM.
  2. Renvoyer false à partir d'un gestionnaire d'événements jQuery empêche le navigateur de naviguer vers l'adresse du lien et empêche l'événement de se propager via le DOM.
  3. Renvoyer false à partir d'un gestionnaire d'événements DOM normal ne fait absolument rien.

Va voir tous les trois exemple.

  1. Retour en ligne faux.
<div onclick='executeParent()'>
  <a href='http://stackoverflow.com' onclick='return false'>Click here to visit stackoverflow.com</a>
</div>
<script>
  var link = document.querySelector('a');

  link.addEventListener('click', function() {
    event.currentTarget.innerHTML = 'Click event prevented using inline html'
    alert('Link Clicked');
  });


  function executeParent() {
    alert('Div Clicked');
  }
</script>
  1. Renvoyer false à partir d'un gestionnaire d'événements jQuery.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href='http://stackoverflow.com'>Click here to visit stackoverflow.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>
  1. Renvoyer false à partir d'un gestionnaire d'événements DOM normal.
<div onclick='executeParent()'>
  <a href='http://stackoverflow.com' onclick='executeChild()'>Click here to visit stackoverflow.com</a>
</div>
<script>
  function executeChild() {
    event.currentTarget.innerHTML = 'Click event prevented'
    alert('Link Clicked');
    return false
  }

  function executeParent() {
    alert('Div Clicked');
  }
</script>

J'espère que ces exemples sont clairs. Essayez d’exécuter tous ces exemples dans un fichier html pour voir comment ils fonctionnent.

126
Keval Bhatt