Question Quelle est la différence entre event.stopPropagation et event.preventDefault?


Ils semblent faire la même chose ... Est-ce qu'un moderne et un ancien? Ou sont-ils pris en charge par différents navigateurs?

Quand je gère les événements moi-même (sans cadre), je vérifie toujours les deux et j'exécute les deux si présents. (Moi aussi return false, mais j'ai le sentiment que cela ne fonctionne pas avec les événements liés à node.addEventListener).

Alors pourquoi les deux? Devrais-je continuer à vérifier les deux? Ou y a-t-il réellement une différence?

(Je sais, beaucoup de questions, mais ils sont tous en quelque sorte les mêmes =))


600
2018-05-11 11:45


origine


Réponses:


stopPropagation arrête l'événement de faire bouillir la chaîne d'événements.

preventDefault empêche l'action par défaut que le navigateur effectue sur cet événement.

Disons que vous avez

<div id="foo">
 <button id="but" />
</div>

$("#foo").click(function() {
   // mouse click on div
});

$("#but").click(function(ev) {
   // mouse click on button
   ev.stopPropagation();
});

Exemple

$("#but").click(function(event){
  event.preventDefault();
 });


$("#foo").click(function(){
 alert("parent click event fired !");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
  <button id="but">button</button>
</div>

$("#but").click(function(event){
  event.stopPropagation();
 });


$("#foo").click(function(){
 alert("parent click event fired !");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
  <button id="but">button</button>
</div>

Avec stopPropagation seulement le boutons cliquez sur gestionnaire est appelé et le divs cliquez sur handler ne tire jamais.

Où comme si vous juste preventDefault seule l'action par défaut des navigateurs est arrêtée mais le gestionnaire de clics de div continue de fonctionner.

Voici quelques documents sur les objets d'événement DOM de MDN et MSDN

MDN:

Pour IE9 et FF, vous pouvez simplement utiliser preventDefault & stopPropagation.

Pour soutenir IE8 et inférieur remplacer stopPropagation avec cancelBubble et remplacer preventDefault avec returnValue


785
2018-05-11 11:46



Terminologie

De quirksmode.org:

Capture d'événement

Lorsque vous utilisez la capture d'événement

               | |
--------------- | | -----------------
| element1 | | |
| ----------- | | ----------- |
| | element2 \ / | |
| ------------------------- |
| Événement CAPTURING |
-----------------------------------

le gestionnaire d'événements de element1 se déclenche en premier, le gestionnaire d'événement de element2 tire en dernier.

Événement bouillonnant

Lorsque vous utilisez un événement bouillonnant

               / \
--------------- | | -----------------
| element1 | | |
| ----------- | | ----------- |
| | element2 | | | |
| ------------------------- |
| Événement BUBBLING |
-----------------------------------

le gestionnaire d'événements de element2 se déclenche en premier, le gestionnaire d'événement de element1 tire en dernier.

Tout événement se produisant dans le modèle d'événement W3C est d'abord capturé jusqu'à ce qu'il atteigne l'élément cible puis remonte à nouveau.

                 | | / \
----------------- | | - | | -----------------
| element1 | | | | |
| ------------- | | - | | ----------- |
| | element2 \ / | | | |
| -------------------------------- |
| Modèle d'événement W3C |
------------------------------------------

Interface

De w3.org, pour capture d'événement:

Si la capture EventListener souhaite empêcher la poursuite du traitement   l'événement de se produire, il peut appeler le stopPropagation méthode de    Event interface. Cela empêchera l'envoi de l'événement,   bien que supplémentaire EventListeners enregistré à la même hiérarchie   niveau recevra toujours l'événement. Une fois un événement stopPropagationméthode a été appelée, d'autres appels à cette méthode n'ont pas   effet supplémentaire. Si aucun captureur supplémentaire n'existe et    stopPropagation n'a pas été appelé, l'événement déclenche le   approprié EventListeners sur la cible elle-même.

Pour événement bouillonnant:

Tout gestionnaire d'événement peut choisir d'empêcher la propagation d'autres événements   appeler le stopPropagation méthode de Event interface. Si seulement    EventListener appelle cette méthode, tous les autres EventListeners sur le   actuel EventTarget sera déclenché mais bouillonnant cessera à ce   niveau. Un seul appel à stopPropagation est nécessaire pour prévenir davantage   bouillonnant.

Pour annulation d'événement:

L'annulation est accomplie en appelant le Eventde preventDefault   méthode. Si un ou plusieurs EventListeners appel preventDefault pendant   toute phase du flux d'événements, l'action par défaut sera annulée.

Exemples

Dans les exemples suivants, un clic sur le lien hypertexte dans le navigateur Web déclenche le flux de l'événement (les écouteurs d'événement sont exécutés) et l'action par défaut de la cible de l'événement (un nouvel onglet est ouvert).

HTML:

<div id="a">
  <a id="b" href="http://www.google.com/" target="_blank">Google</a>
</div>
<p id="c"></p>

JavaScript:

var el = document.getElementById("c");

function capturingOnClick1(ev) {
    el.innerHTML += "DIV event capture<br>";
}

function capturingOnClick2(ev) {
    el.innerHTML += "A event capture<br>";
}

function bubblingOnClick1(ev) {
    el.innerHTML += "DIV event bubbling<br>";
}

function bubblingOnClick2(ev) {
    el.innerHTML += "A event bubbling<br>";
}

// The 3rd parameter useCapture makes the event listener capturing (false by default)
document.getElementById("a").addEventListener("click", capturingOnClick1, true);
document.getElementById("b").addEventListener("click", capturingOnClick2, true);
document.getElementById("a").addEventListener("click", bubblingOnClick1, false);
document.getElementById("b").addEventListener("click", bubblingOnClick2, false);

Exemple 1: il en résulte la sortie

DIV event capture
A event capture
A event bubbling
DIV event bubbling

Exemple 2: ajouter stopPropagation() à la fonction

function capturingOnClick1(ev) {
    el.innerHTML += "DIV event capture<br>";
    ev.stopPropagation();
}

résulte dans la sortie

DIV event capture

L'écouteur d'événement a empêché la propagation vers le bas et vers le haut de l'événement. Cependant, cela n'a pas empêché l'action par défaut (ouverture d'un nouvel onglet).

Exemple 3: ajouter stopPropagation() à la fonction

function capturingOnClick2(ev) {
    el.innerHTML += "A event capture<br>";
    ev.stopPropagation();
}

ou la fonction

function bubblingOnClick2(ev) {
    el.innerHTML += "A event bubbling<br>";
    ev.stopPropagation();
}

résulte dans la sortie

DIV event capture
A event capture
A event bubbling

En effet, les deux écouteurs d'événement sont enregistrés sur la même cible d'événement. Les auditeurs d'événement ont empêché la poursuite de la propagation vers le haut de l'événement. Cependant, ils n'ont pas empêché l'action par défaut (ouverture d'un nouvel onglet).

Exemple 4: ajouter preventDefault() à n'importe quelle fonction, par exemple

function capturingOnClick1(ev) {
    el.innerHTML += "DIV event capture<br>";
    ev.preventDefault();
}

empêche l'ouverture d'un nouvel onglet.


178
2018-05-30 12:16



return false;


return false; Est-ce que 3 choses séparées quand vous l'appelez:

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

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

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. Utilisation preventDefault(); si vous voulez "juste" empêcher le comportement du navigateur par défaut. Utilisez return false; lorsque vous voulez empêcher le comportement par défaut du navigateur et empêcher l'événement de propager le DOM. Dans la plupart des situations où vous utiliseriez return false; ce que tu veux vraiment c'est preventDefault().

Exemples:


Essayons de comprendre avec des exemples:

Nous verrons l'exemple pur de JAVASCRIPT

Exemple 1:

<div onclick='executeParent()'>
  <a href='https://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 d'abord, vous obtiendrez   l'alerte javascript Lien cliquéEnsuite, vous obtiendrez le javascript   alerte div cliqué et immédiatement vous serez redirigé vers   stackoverflow.com.

Exemple 2:

<div onclick='executeParent()'>
  <a href='https://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écutez le code ci-dessus, vous verrez l'hyperlien 'Cliquez ici pour visiter   stackoverflow.com 'maintenant si vous cliquez sur ce lien d'abord vous obtiendrez   l'alerte javascript Lien cliquéEnsuite, vous obtiendrez le javascript   alerte div cliqué Ensuite, vous verrez le lien hypertexte 'Cliquez ici pour   visitez stackoverflow.com 'remplacé par le texte' Événement Click évité '   et tu vas ne pas être redirigé vers stackoverflow.com. Cela est dû à la méthode event.preventDefault () que nous avons utilisée pour empêcher le clic par défaut   action à déclencher.

Exemple 3:

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

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

Cette fois si vous cliquez sur Lier la fonction executeParent () ne sera pas   être appelé et vous ne recevrez pas l'alerte javascript div cliqué   cette fois. Cela est dû à nous avoir empêché la propagation à la   parent div 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. C'est parce que nous n'avons pas empêché   l'action de clic par défaut de déclencher cette fois en utilisant   Méthode event.preventDefault ().

Exemple 4:

<div onclick='executeParent()'>
  <a href='https://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é et vous n'obtiendrez pas l'alerte javascript. Ceci est dû à nous   ayant empêché la propagation à la div parente en utilisant   Méthode event.stopPropagation (). Ensuite, vous verrez le lien hypertexte 'Cliquez   ici pour visiter stackoverflow.com 'remplacé par le texte' Click événement   empêché 'et vous ne serez pas redirigé vers stackoverflow.com. Ce   est parce que nous avons empêché l'action de clic par défaut de déclenchement   cette fois en utilisant la méthode event.preventDefault ().

Exemple 5:

Pour le retour faux, j'ai trois exemples et tous semblent faire exactement la même chose (juste renvoyer faux), mais en réalité le   les résultats sont assez différents. Voici ce qui se passe réellement dans chacun des   ce qui précède.

cas:

  1. Retour faux à partir d'un gestionnaire d'événement en ligne empêche le navigateur de naviguer vers l'adresse de lien, mais il n'empêche pas l'événement de se propager à travers le DOM.
  2. Retour faux à partir d'un gestionnaire d'événements jQuery empêche le navigateur de naviguer vers l'adresse de liaison et empêche l'événement de se propager à travers le DOM.
  3. Retour faux à partir d'un gestionnaire d'événements DOM régulier ne fait absolument rien.

Va voir tous les trois exemples.

  1. Retour en ligne faux.

<div onclick='executeParent()'>
  <a href='https://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. Retour faux à partir d'un gestionnaire d'événement jQuery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href='https://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énement DOM normal.

<div onclick='executeParent()'>
  <a href='https://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.


46
2018-05-27 07:14



Ceci est la citation de ici

Event.preventDefault

La méthode preventDefault empêche un événement d'exécuter sa fonctionnalité par défaut. Par exemple, vous utiliseriez preventDefault sur un élément A pour arrêter de cliquer sur cet élément pour quitter la page en cours:

//clicking the link will *not* allow the user to leave the page 
myChildElement.onclick = function(e) { 
    e.preventDefault(); 
    console.log('brick me!'); 
};

//clicking the parent node will run the following console statement because event propagation occurs
logo.parentNode.onclick = function(e) { 
    console.log('you bricked my child!'); 
};

Alors que la fonctionnalité par défaut de l'élément est mappée, l'événement continue de gonfler le DOM.

Event.stopPropagation

La seconde méthode, stopPropagation, permet à la fonctionnalité par défaut de l'événement de se produire mais empêche la propagation de l'événement:

//clicking the element will allow the default action to occur but propagation will be stopped...
myChildElement.onclick = function(e) { 
    e.stopPropagation();
    console.log('prop stop! no bubbles!'); 
};

//since propagation was stopped by the child element's onClick, this message will never be seen!
myChildElement.parentNode.onclick = function(e) { 
    console.log('you will never see this message!'); 
};

stopPropagation empêche efficacement les éléments parents de connaître un événement donné sur leur enfant.

Alors qu'une simple méthode d'arrêt nous permet de gérer rapidement les événements, c'est   important de penser à ce que vous voulez exactement arriver avec   bouillonnant. Je parie que tout ce qu'un développeur veut vraiment, c'est prévenirDéfaut   90% du temps! Un "arrêt" incorrect d'un événement pourrait vous causer   de nombreux problèmes sur la ligne; vos plugins peuvent ne pas fonctionner et votre   plugins tiers pourraient être maçonnés. Ou pire encore - votre code   brise d'autres fonctionnalités sur un site.


14
2018-03-25 14:55



event.preventDefault(); Arrête l'action par défaut d'un élément.

event.stopPropagation(); Empêche l'événement de faire bouillir l'arborescence DOM, empêchant les gestionnaires parents d'être notifiés de l'événement.

Par exemple, s'il existe un lien avec une méthode de clic attachée à l'intérieur d'un DIV ou FORM qui a également une méthode de clic ci-joint, il permettra d'éviter le DIV ou FORM cliquez sur la méthode de tir.


0
2018-05-06 11:32



$("#but").click(function(event){
console.log("hello");
  event.preventDefault();
 });


$("#foo").click(function(){
 alert("parent click event fired !");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="foo">
  <button id="but">button</button>
</div>


-3
2017-09-10 03:57