Wat is het verschil tussen event.stopPropagation en event.preventDefault?

Ze lijken hetzelfde te doen…
Is er een modern en een oud? Of worden ze ondersteund door verschillende browsers?

Als ik zelf gebeurtenissen afhandel (zonder framework), controleer ik altijd op beide en voer beide uit indien aanwezig. (Ik return false, maar ik heb het gevoel dat dit niet werkt met gebeurtenissen die zijn gekoppeld aan node.addEventListener).

Dus waarom beide? Moet ik beide blijven controleren? Of is er eigenlijk een verschil?

(Ik weet het, veel vragen, maar ze zijn allemaal ongeveer hetzelfde =))


Antwoord 1, autoriteit 100%

stopPropagationvoorkomt verdere verspreiding van de huidige gebeurtenis in de fase van vastleggen en borrelen.

preventDefaultvoorkomt de standaardactie die de browser op die gebeurtenis uitvoert.

Voorbeelden

preventDefault

$("#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>

Antwoord 2, autoriteit 25%

Terminologie

Van quirksmode.org:

Gebeurtenis vastleggen

Wanneer u gebeurtenisregistratie gebruikt

| |
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 \ / | |
| ------------------------- |
| Evenement VASTLEGGEN |
-----------------------------------

de event-handler van element1 wordt als eerste geactiveerd, de event-handler van element2 als laatste.

Gebeurtenis borrelen

Als je event bubbels gebruikt

/ \
---------------| |-----------------
| element1 | | |
| -----------| |----------- |
| |element2 | | | |
| ------------------------- |
| Evenement BUBBELING |
-----------------------------------

de event-handler van element2 wordt als eerste geactiveerd, de event-handler van element1 als laatste.

Elke gebeurtenis die plaatsvindt in het W3C-gebeurtenismodel wordt eerst vastgelegd totdat deze het doelelement bereikt en vervolgens weer opborrelt.

| | / \
-----------------| |--| |-----------------
| element1 | | | | |
| -------------| |--| |----------- |
| |element2 \ / | | | |
| -------------------------------- |
| W3C-gebeurtenismodel |
------------------------------------------

Interface

Van w3.org, voor gebeurtenis vastleggen:

Als de vastleggende EventListenerverdere verwerking van:
de gebeurtenis zich voordoet, kan de methode stopPropagationvan de . worden aangeroepen
Eventinterface. Dit voorkomt verdere verzending van het evenement,
hoewel aanvullende EventListenersgeregistreerd zijn in dezelfde hiërarchie
niveau zal het evenement nog steeds ontvangen. Zodra een evenement stopPropagation
methode is aangeroepen, hebben verdere aanroepen van die methode geen
bijkomend effect. Als er geen extra vangers bestaan ​​en
stopPropagationis niet aangeroepen, de gebeurtenis activeert de
geschikte EventListenersop het doel zelf.

Voor event borrelen:

Elke gebeurtenis-handler kan ervoor kiezen om verdere verspreiding van gebeurtenissen te voorkomen door:
aanroepen van de stopPropagationmethode van de Eventinterface. indien van toepassing
EventListenerroept deze methode aan, alle extra EventListenersop de
huidige EventTargetwordt geactiveerd, maar daarna stopt het bubbelen
peil. Slechts één aanroep naar stopPropagationis nodig om verdere te voorkomen
borrelen.

Voor geannuleerd evenement:

Annulering wordt bereikt door de Event‘s preventDefaultaan te roepen
methode. Als een of meer EventListenerspreventDefaultaanroepen tijdens
elke fase van de gebeurtenisstroom wordt de standaardactie geannuleerd.

Voorbeelden

In de volgende voorbeelden activeert een klik op de hyperlink in de webbrowser de stroom van de gebeurtenis (de gebeurtenislisteners worden uitgevoerd) en de standaardactie van het gebeurtenisdoel (een nieuw tabblad wordt geopend).

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

Voorbeeld 1: het resulteert in de uitvoer

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

Voorbeeld 2: stopPropagation()aan de functie toevoegen

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

resultaten in de uitvoer

DIV event capture

De gebeurtenislistener verhinderde verdere neerwaartse en opwaartse verspreiding van de gebeurtenis. Het verhinderde echter niet de standaardactie (een nieuw tabblad openen).

Voorbeeld 3: stopPropagation()toevoegen aan de functie

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

of de functie

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

resultaten in de uitvoer

DIV event capture
A event capture
A event bubbling

Dit komt omdat beide gebeurtenislisteners zijn geregistreerd op hetzelfde gebeurtenisdoel. De gebeurtenislisteners verhinderden verdere opwaartse verspreiding van de gebeurtenis. Ze hebben echter de standaardactie (het openen van een nieuw tabblad) niet voorkomen.

Voorbeeld 4: preventDefault()toevoegen aan een functie, voor instantie

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

voorkomt dat een nieuw tabblad wordt geopend.


Antwoord 3, autoriteit 7%

retourneer false;


return false;doet 3 verschillende dingen als je het aanroept:

  1. event.preventDefault() Het stopt het standaardgedrag van de browser.
  2. event.stopPropagation() Het voorkomt dat de gebeurtenis de DOM verspreidt (of ‘opborrelt’).
  3. Stopt de uitvoering van de callback en keert onmiddellijk terug als er wordt gebeld.

Merk op dat dit gedrag verschilt van normale (niet-jQuery) gebeurtenishandlers, waarbij met name return falseniet voorkomt dat de gebeurtenis opborrelt.

preventDefault();


preventDefault();doet één ding: het stopt het standaardgedrag van de browser.

Wanneer gebruik je ze?


We weten wat ze doen, maar wanneer moeten we ze gebruiken? Het hangt er simpelweg van af wat je wilt bereiken. Gebruik preventDefault();als je ‘gewoon’ het standaard browsergedrag wilt voorkomen. Gebruik return false; wanneer u het standaard browsergedrag wilt voorkomen en wilt voorkomen dat de gebeurtenis de DOM verspreidt. In de meeste situaties waarin u return false zou gebruiken; wat je echt wilt is preventDefault().

Voorbeelden:


Laten we proberen het te begrijpen met voorbeelden:

We zullen een puur JAVASCRIPT-voorbeeld zien

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

Antwoord 4, autoriteit 2%

Dit is het citaat van hier

Event.preventDefault

De methode preventDefault voorkomt dat een gebeurtenis zijn standaardfunctionaliteit uitvoert. U zou bijvoorbeeld preventDefault op een A-element gebruiken om te voorkomen dat op dat element wordt geklikt om de huidige pagina te verlaten:

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

Hoewel de standaardfunctionaliteit van het element is gemetseld, blijft het evenement de DOM opborrelen.

Event.stopPropagation

De tweede methode, stopPropagation, zorgt ervoor dat de standaardfunctionaliteit van de gebeurtenis plaatsvindt, maar voorkomt dat de gebeurtenis zich voortplant:

//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 voorkomt effectief dat ouderelementen iets weten over een bepaalde gebeurtenis op het onderliggende item.

Hoewel we met een eenvoudige stopmethode snel gebeurtenissen kunnen afhandelen, is het:
belangrijk om na te denken over waar je precies mee wilt gebeuren
borrelen. Ik durf te wedden dat alles wat een ontwikkelaar echt wil, is voorkomenDefault
90% van de tijd! Het onjuist “stoppen” van een gebeurtenis kan ertoe leiden dat u
talloze problemen langs de lijn; uw plug-ins werken mogelijk niet en uw
plug-ins van derden kunnen worden gemetseld. Of nog erger: jouw code
breekt andere functionaliteit op een site.


Antwoord 5

event.preventDefault();Stopt de standaardactie van een element.

event.stopPropagation();Voorkomt dat de gebeurtenis in de DOM-structuur opborrelt, waardoor eventuele bovenliggende handlers niet op de hoogte worden gesteld van de gebeurtenis.

Als er bijvoorbeeld een link met een klikmethode is gekoppeld aan een DIVof FORMwaaraan ook een klikmethode is gekoppeld, wordt voorkomen dat de DIVof FORMklikmethode vanaf het vuren.


Antwoord 6

Event.preventDefault- stopt het standaardgedrag van de browser. Nu komt wat het standaardgedrag van de browser is. Stel je hebt een ankertag en deze heeft een href-attribuut en deze ankertag is genest in een div-tag die een klikgebeurtenis heeft. Het standaardgedrag van de ankertag is dat wanneer op de ankertag wordt geklikt, het moet navigeren, maar wat event.preventDefault doet, is dat het in dit geval de navigatie stopt. Maar het stopt nooit het borrelen van een evenement of de escalatie van een evenement, d.w.z.

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

Het resultaat is

“element is aangeklikt”

“container is aangeklikt”

Nu event.StopPropation stopt het borrelen van een evenement of escalatie van het evenement. Nu met bovenstaand voorbeeld

$('.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');
});

Het resultaat is

“element is aangeklikt”

Zie deze link voor meer info
https://codeplanet.io/preventdefault-vs-stoppropagation-vs-stopimmediatepropagation/


Antwoord 7

TL;DR
event.preventDefault()
Voorkomt het standaardgedrag van de browser (zoals het openen van een link), maar voorkomt niet dat de gebeurtenis de DOM opblaast.

event.stopPropagation()
Voorkomt dat de gebeurtenis de DOM opblaast, maar stopt het standaardgedrag van de browser niet.

return false;
Meestal gezien in jQuery-code, het voorkomt het standaardgedrag van de browser, voorkomt dat de gebeurtenis de
DOM, en keert onmiddellijk terug van elke terugbelactie.

Bekijk deze echt leuk & gemakkelijk 4 minuten lezenmet voorbeelden van waaruit het bovenstaande stuk is gekopieerd.


Antwoord 8

$("#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>

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Other episodes