Was ist der Unterschied zwischen event.stopPropagation und event.preventDefault?

Terminologie

Von quirksmode.org :

Ereigniserfassung

Wenn Sie die Ereigniserfassung verwenden

 | | 
--------------- | | -----------------
 | element1 | | | 
 | ----------- | | ----------- | 
 | | element2 \/| | 
 | ------------------------- | 
 | Ereignis CAPTURING | 
 ------------------------------- 

der Ereignishandler von element1 wird zuerst ausgelöst, der Ereignishandler von element2 wird zuletzt ausgelöst.

Ereignis sprudelt

Wenn Sie Ereignisblubber verwenden

/\ 
--------------- | | -----------------
 | element1 | | | 
 | ----------- | | ----------- | 
 | | element2 | | | | 
 | ------------------------- | 
 | Ereignis BUBBLING | 
 ------------------------------- 

der Event-Handler von element2 wird zuerst ausgelöst, der Event-Handler von Element1 wird zuletzt ausgelöst.

Jedes Ereignis, das im W3C-Ereignismodell stattfindet, wird zuerst erfasst, bis es das Zielelement erreicht, und dann erneut gesprudelt.

 | |/\ 
----------------- | | - | | -----------------
 | element1 | | | | | 
 | ------------- | | - | | ----------- | 
 | | element2 \/| | | | 
 | -------------------------------- | 
 | W3C-Ereignismodell | 
--------------------------------------

Schnittstelle

Von w3.org , für event capture:

Wenn die Erfassung EventListener die Weiterverarbeitung von .__ verhindern soll. Wenn das Ereignis auftritt, kann es die stopPropagation-Methode der .__ aufrufen. Event Schnittstelle. Dies verhindert den weiteren Versand der Veranstaltung, obwohl zusätzliche EventListeners in derselben Hierarchie registriert sind Ebene wird das Ereignis noch erhalten. Einmal stopPropagation.__ eines Ereignisses. Die Methode wurde aufgerufen, weitere Aufrufe dieser Methode haben keine zusätzlicher Effekt. Wenn keine zusätzlichen Erfasser vorhanden sind und stopPropagation wurde nicht aufgerufen, das Ereignis löst die .__ aus. entsprechende EventListeners auf dem Ziel selbst.

Für event bubbling:

Jeder Event-Handler kann sich dafür entscheiden, die Weiterleitung von Ereignissen durch .__ zu verhindern. Aufruf der stopPropagation-Methode der Event-Schnittstelle. Wenn überhaupt EventListener ruft diese Methode auf, alle zusätzlichen EventListeners in der aktuell EventTarget wird ausgelöst, aber das Blasen wird damit aufhören Niveau. Es ist nur ein Aufruf von stopPropagation erforderlich, um weitere .__ zu verhindern. sprudelnd.

Für Ereignisabbruch:

Die Stornierung wird durch Aufrufen der Event.__ von preventDefault durchgeführt. Methode. Wenn ein oder mehrere EventListenerspreventDefault-Aufrufe während __. In jeder Phase des Ereignisflusses wird die Standardaktion abgebrochen.

Beispiele

In den folgenden Beispielen wird durch Klicken auf den Hyperlink im Webbrowser der Ereignisfluss (die Ereignis-Listener werden ausgeführt) und die Standardaktion des Ereignisziels (eine neue Registerkarte wird geöffnet) ausgelöst.

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);

Beispiel 1 : führt zur Ausgabe

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

Beispiel 2 : Hinzufügen von stopPropagation() zur Funktion

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

ergibt die Ausgabe

DIV event capture

Der Ereignis-Listener verhinderte die weitere Ausbreitung des Ereignisses nach unten und nach oben. Die Standardaktion (Öffnen einer neuen Registerkarte) wurde jedoch nicht verhindert.

Beispiel 3 : Hinzufügen von stopPropagation() zur Funktion

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

oder die Funktion

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

ergibt die Ausgabe

DIV event capture
A event capture
A event bubbling

Dies liegt daran, dass beide Ereignis-Listener auf demselben Ereignisziel registriert sind. Die Ereignis-Listener verhinderten eine weitere Aufwärts-Ausbreitung des Ereignisses. Sie verhinderten jedoch nicht die Standardaktion (das Öffnen einer neuen Registerkarte).

Beispiel 4 : Hinzufügen von preventDefault() zu einer Funktion, zum Beispiel

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

verhindert, dass eine neue Registerkarte geöffnet wird.

falsch zurückgeben;

return false; führt 3 verschiedene Dinge aus, wenn Sie es aufrufen:

1. event.preventDefault() - Beendet das Standardverhalten des Browsers.
2. event.stopPropagation() - Verhindert, dass das Ereignis das DOM ausbreitet (oder aufbläst).
3. Stoppt die Callback-Ausführung und kehrt sofort zurück, wenn er aufgerufen wird.

Beachten Sie, dass sich dieses Verhalten von normalen (Nicht-jQuery) -Ereignishandlern unterscheidet, bei denen return false das Ereignis nicht aufhält.

Standard verhindern();

preventDefault(); macht eines: Es stoppt das Standardverhalten des Browsers.

Wann verwende ich sie?

Wir wissen, was sie tun, aber wann sie verwendet werden? Es hängt einfach davon ab, was Sie erreichen möchten. Verwenden Sie preventDefault();, wenn Sie das Standardverhalten des Browsers "nur" verhindern möchten. Verwenden Sie return false. wenn Sie das Standardverhalten des Browsers verhindern und verhindern möchten, dass das Ereignis das DOM verbreitet. In den meisten Situationen, in denen Sie return false verwenden würden; Was Sie wirklich wollen, ist preventDefault().

Beispiele:

Versuchen wir anhand von Beispielen zu verstehen:

Wir werden ein reines JAVASCRIPT-Beispiel sehen

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

Führen Sie den obigen Code aus. Sie sehen den Hyperlink "Klicken Sie hier, um .__ zu besuchen. stackoverflow.com - Wenn Sie zuerst auf diesen Link klicken, erhalten Sie der Javascript-Alarm Link Clicked Weiter erhalten Sie das Javascript alert div Wenn Sie auf klicken, werden Sie sofort zu .__ weitergeleitet. stackoverflow.com.

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

Führen Sie den obigen Code aus, und Sie sehen den Hyperlink "Klicken Sie hier, um zu besuchen stackoverflow.com Wenn Sie jetzt auf diesen Link klicken, erhalten Sie der Javascript-Alarm Link Clicked Weiter erhalten Sie das Javascript alert div Klicken Sie auf Als Nächstes wird der Hyperlink angezeigt. Klicken Sie hier. Besuchen Sie stackoverflow.com. "Durch den Text ersetzt." Klickereignis verhindert ". und Sie werden nicht zu stackoverflow.com umgeleitet. Dies ist auf die event.preventDefault () - Methode zurückzuführen, die wir verwendet haben, um den Standardklick .__ zu verhindern. auszulösende Aktion.

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

Wenn Sie diesmal auf Link klicken, wird die Funktion executeParent () nicht aufgerufen werden und Sie erhalten nicht die Javascript-Warnung div Clicked diesmal. Dies liegt daran, dass wir die Weitergabe an die .__ verhindert haben. übergeordnetes div mit der Methode event.stopPropagation (). Als Nächstes sehen Sie das Hyperlink Klicken Sie hier, um stackoverflow.com aufzurufen. Ersetzt durch den Text "Click-Event wird ausgeführt" und sofort werden Sie an stackoverflow.com weitergeleitet. Dies liegt daran, dass wir nicht verhindert haben Die Standard-Klickaktion wird durch die Verwendung von .__ ausgelöst. Methode event.preventDefault ().

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

Wenn Sie auf den Link klicken, ist die Funktion executeParent () nicht angerufen und Sie erhalten keine Javascript-Benachrichtigung. Dies liegt an uns Die Weitergabe an das übergeordnete div wurde mithilfe von .__ verhindert. Methode event.stopPropagation (). Als Nächstes sehen Sie den Hyperlink "Klicken Sie auf Hier können Sie stackoverflow.com besuchen. ♦ Ersetzt durch den Text „Click-Ereignis verhindert und Sie werden nicht zu stackoverflow.com weitergeleitet. Diese ist, weil wir verhindert haben, dass die Standard-Klickaktion .__ auslöst. diesmal mit der Methode event.preventDefault ().

Beispiel 5:

Für return false habe ich drei Beispiele und alle scheinen genau dasselbe zu tun (nur false), aber in Wirklichkeit ist das Die Ergebnisse sind sehr unterschiedlich. Was passiert eigentlich in jedem von obenstehendes.

fälle:

1. Durch das Zurückgeben von false von einem Inline-Ereignishandler wird verhindert, dass der Browser zur Linkadresse navigiert. Das Ereignis wird jedoch nicht durch das DOM propagiert.
2. Die Rückgabe von false aus einem jQuery-Ereignishandler verhindert, dass der Browser zur Linkadresse navigiert, und verhindert, dass sich das Ereignis im DOM ausbreitet.
3. Die Rückgabe von false von einem regulären DOM-Ereignishandler bewirkt absolut nichts.

Werden alle drei Beispiele sehen.

1. Inline-Rückgabe falsch.

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

2. Zurückgeben von false aus einem jQuery-Ereignishandler.

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

3. Rückgabe von false von einem regulären DOM-Ereignishandler.

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

Hoffe, diese Beispiele sind klar. Versuchen Sie, alle diese Beispiele in einer HTML-Datei auszuführen, um zu sehen, wie sie funktionieren.

Dies ist das Zitat aus hier

Event.preventDefault

Die Prevault-Methode verhindert, dass ein Ereignis seine Standardfunktionalität ausführt. Zum Beispiel würden Sie "reflectDefault" für ein A-Element verwenden, um zu verhindern, dass durch Klicken auf dieses Element die aktuelle Seite verlassen wird:

//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!'); 
};

Während die Standardfunktionalität des Elements gemauert ist, sprudelt das Ereignis das DOM weiterhin auf.

Event.stopPropagation

Die zweite Methode stopPropagation ermöglicht die Ausführung der Standardfunktionalität des Ereignisses, verhindert jedoch die Verbreitung des Ereignisses:

//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 verhindert, dass übergeordnete Elemente über ein bestimmtes Ereignis auf dem untergeordneten Element informiert werden. 

Während eine einfache Stop-Methode es ermöglicht, Ereignisse schnell zu verarbeiten, ist es Es ist wichtig, darüber nachzudenken, was genau mit .__ geschehen soll. sprudelnd Ich würde wetten, dass ein Entwickler wirklich alles in der Lage ist, defineDefault 90% der Zeit! Ein falsches "Stoppen" eines Ereignisses kann dazu führen, dass zahlreiche Probleme auf der ganzen Linie; Ihre Plugins funktionieren möglicherweise nicht und Ihr Plugins von Drittanbietern können gemauert werden. Oder noch schlimmer - Ihr Code unterbricht andere Funktionen auf einer Site.

e.preventDefault () verhindert das Auftreten des Standardereignisses, e.stopPropagation () verhindert, dass das Ereignis sprudelt, und false liefert beide. 

mit event.stopPropagation () können andere Handler auf demselben Element ausgeführt werden, während event.stopImmediatePropagation () die Ausführung jedes Ereignisses verhindert.

Event.preventDefault stoppt das Standardverhalten des Browsers. Nun kommt das Browser-Standardverhalten. Angenommen, Sie haben ein Ankertag und es hat ein href-Attribut, und dieses Ankertag ist in einem div-Tag verschachtelt, das über ein Klickereignis verfügt. Das Standardverhalten des Ankertags ist, wenn auf das Ankertag geklickt wird, durch das es navigieren soll. In event.preventDefault wird die Navigation in diesem Fall jedoch angehalten. Es stoppt jedoch nie das Sprudeln eines Ereignisses oder eine Eskalation eines Ereignisses, d

<div class="container">
 <a href="#" class="element">Click Me!</a>
</div>

$('.container').on('click', function(e) {
 console.log('container was clicked');
});

$('.element').on('click', function(e) {
  e.preventDefault(); // Now link won't go anywhere
  console.log('element was clicked');
});

Das Ergebnis wird sein 

"Element wurde angeklickt"

"Container wurde angeklickt"

Jetzt event.StopPropation stoppt das Sprudeln des Ereignisses oder die Eskalation des Ereignisses. Nun zum obigen Beispiel 

$('.container').on('click', function(e) {
  console.log('container was clicked');
});

$('.element').on('click', function(e) {
  e.preventDefault(); // Now link won't go anywhere
  e.stopPropagation(); // Now the event won't bubble up
 console.log('element was clicked');
});

Ergebnis wird sein 

"Element wurde angeklickt"

Weitere Informationen finden Sie unter diesem Link https://codeplanet.io/preventdefault-vs-stoppropagation-vs-stopimmediatepropagation/

event.preventDefault(); Stoppt die Standardaktion eines Elements.

event.stopPropagation(); Verhindert, dass das Ereignis die DOM-Baumstruktur sprudelt, und verhindert, dass alle übergeordneten Handler über das Ereignis benachrichtigt werden.

Wenn beispielsweise eine Verknüpfung mit einer Click-Methode in einer DIV oder FORM vorhanden ist, an die auch eine Click-Methode angehängt ist, verhindert dies, dass die Click-Methode DIV oder FORM ausgelöst wird.