Terminologia

Od quirksmode.org :

Przechwytywanie zdarzeń

Gdy używasz przechwytywania zdarzeń

               | |
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  \ /          |     |
|   -------------------------     |
|        Event CAPTURING          |
-----------------------------------

Obsługa zdarzeń element1 zostanie wywołana jako pierwsza, obsługa zdarzeń element2 zostanie wywołana jako ostatnia.

Event bubbling

Kiedy używasz event bubbling

               / \
---------------| |-----------------
| element1     | |                |
|   -----------| |-----------     |
|   |element2  | |          |     |
|   -------------------------     |
|        Event BUBBLING           |
-----------------------------------

Obsługa zdarzeń element2 zostanie wywołana jako pierwsza, obsługa zdarzeń element1 zostanie wywołana jako ostatnia.

każde wydarzenie odbywające się w modelu W3C event jest pierwszym uchwycony, dopóki nie dotrze do elementu docelowego, a następnie ponownie się bąbelkuje.

                 | |  / \
-----------------| |--| |-----------------
| element1       | |  | |                |
|   -------------| |--| |-----------     |
|   |element2    \ /  | |          |     |
|   --------------------------------     |
|        W3C event model                 |
------------------------------------------

Interfejs

Od w3.org , dla przechwytywanie zdarzeń :

Jeśli przechwycenie EventListener chce zapobiec dalszemu przetwarzaniu zdarzenia z zachodzącego może wywołać metodę stopPropagation Event interfejs. Uniemożliwi to dalszą wysyłkę wydarzenia, chociaż dodatkowe EventListeners zarejestrowane w tej samej hierarchii poziom nadal otrzyma wydarzenie. Po wydarzeniu stopPropagation metoda została wywołana, kolejne wywołania tej metody nie mają dodatkowy efekt. W przypadku braku dodatkowych kapturników i stopPropagation nie został wywołany, zdarzenie uruchamia odpowiednie EventListeners na samym celu.

Dla zdarzenia :

Każda obsługa zdarzeń może zapobiec dalszemu rozprzestrzenianiu się zdarzeń przez wywołanie metody stopPropagation interfejsu Event. Jeśli w ogóle EventListener wywołuje tę metodę, wszystkie dodatkowe EventListeners na current EventTarget zostanie uruchomiony, ale bąbelki przestaną w tym poziom. Tylko jedno wywołanie stopPropagation jest wymagane, aby zapobiec dalszemu bulgotanie.

Dla odwołanie wydarzenia :

Anulowanie odbywa się poprzez wywołanie Event'S preventDefault metoda. Jeśli jedno lub więcej EventListeners wywołanie preventDefault podczas każda faza przepływu zdarzeń domyślna akcja zostanie anulowana.

Przykłady

W poniższych przykładach kliknij na hiperłącze w przeglądarce internetowej uruchamia przebieg zdarzenia (wykonywane są detektory zdarzeń) i domyślną akcję zdarzenia (otwierana jest nowa karta).

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

Przykład 1 : wyświetla wynik

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

Przykład 2 : dodanie {[29] } do funkcji

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

Wyniki w wyjściu

DIV event capture

Słuchacz zdarzeń zapobiegał dalszemu rozprzestrzenianiu się zdarzenia w dół i w górę. Jednak to nie zapobiegła domyślnej akcji(otwarcie nowej karty).

Przykład 3 : dodanie {[29] } do funkcji

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

Lub funkcja

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

Wyniki w wyjściu

DIV event capture
A event capture
A event bubbling

Dzieje się tak, ponieważ oba detektory zdarzeń są zarejestrowane w tym samym celu zdarzenia. Zdarzenie uniemożliwiło dalszy rozwój wydarzeń. Nie zapobiegły one jednak domyślnej akcji (otwarcie nowej karty).

Przykład 4 : dodanie preventDefault() do dowolnego funkcja, na przykład

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

Zapobiega otwieraniu nowej karty.

Return false;

return false; czy 3 osobne rzeczy kiedy to nazwiesz:

1. event.preventDefault() - zatrzymuje domyślne zachowanie przeglądarek.
2. event.stopPropagation() - zapobiega rozprzestrzenianiu się zdarzenia (lub" bulgotaniu") DOM.
3. zatrzymuje wywołanie zwrotne i powraca natychmiast po wywołaniu.

Zauważ, że to zachowanie różni się od zwykłych (Nie-jQuery) procedur obsługi zdarzeń, w których, w szczególności, return false nie zatrzymuje zdarzenia przed bulgotaniem w górę.

PreventDefault();

preventDefault(); robi jedną rzecz: zatrzymuje domyślne zachowanie przeglądarek.

Kiedy z nich korzystać?

Wiemy, co robią, ale kiedy ich używać? Po prostu zależy to od tego, co chcesz osiągnąć. Użyj preventDefault();, jeśli chcesz" po prostu " zapobiec domyślnemu zachowaniu się przeglądarki. Użyj return false; jeśli chcesz zapobiec domyślnemu zachowaniu przeglądarki i zapobiec propagacji zdarzenia DOM. W większości sytuacji gdzie można użyć return false; co naprawdę chcesz jest preventDefault().

Przykłady:

Spróbujmy zrozumieć przykładami:

Zobaczymy przykład czystego JAVASCRIPT

Przykład 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>

Uruchom powyższy kod zobaczysz hiperłącze 'Kliknij tutaj, aby odwiedzić stackoverflow.com ' {[16] } teraz jeśli klikniesz na ten link najpierw dostaniesz Alert javascript link kliknął następny dostaniesz javascript alert Div kliknij i natychmiast zostaniesz przekierowany do stackoverflow.com.

Przykład 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>

Uruchom powyższy kod zobaczysz hiperłącze ' Kliknij tutaj, aby odwiedzić stackoverflow.com ' teraz jeśli najpierw klikniesz na ten link otrzymasz Alert javascript Link kliknięty następnie otrzymasz javascript alert Div kliknij następnie zobaczysz hiperłącze " Kliknij tutaj, aby wizyta stackoverflow.com "zastąpiono tekstem" Zablokowano Zdarzenie kliknięcia" a ty Nie zostaniesz przekierowany do stackoverflow.com. this is due > to event.metoda preventDefault (), której użyliśmy, aby zapobiec domyślnemu kliknięciu akcja do uruchomienia.

Przykład 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>

Tym razem po kliknięciu na Link funkcja executeParent() nie będzie zostaniesz wywołany, a nie otrzymasz alertu javascript div Clicked tym razem. Jest to spowodowane tym, że uniemożliwiliśmy rozmnażanie się do parent div using event.metoda stopPropagation (). Następnie zobaczysz hiperłącze "Kliknij tutaj, aby odwiedzić stackoverflow.com" zastępuje się tekstem 'Click event zostanie wykonany' i natychmiast zostaniesz Przekierowano do stackoverflow.com to dlatego, że nie zapobiegliśmy domyślna akcja kliknięcia z wyzwalania tym razem za pomocą wydarzenie.preventDefault() metoda.

Przykład 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>

Jeśli klikniesz na Link, funkcja executeParent() nie będzie wywołany i nie otrzymasz alertu javascript. To zasługa nas zapobiegając propagacji do macierzystego div za pomocą wydarzenie.metoda stopPropagation (). Następnie zobaczysz hiperłącze " kliknij tutaj, aby odwiedzić stackoverflow.com / align = "left" / zapobiegać" i nie zostaniesz przekierowany do stackoverflow.com. This ponieważ zapobiegliśmy wyzwalaniu domyślnej akcji kliknięcia tym razem za pomocą eventu.metoda preventDefault ().

Przykład 5:

Dla return false mam trzy przykłady i wszystkie wydają się robić dokładnie to samo( po prostu zwracając false), ale w rzeczywistości wyniki są zupełnie inne. Oto, co faktycznie dzieje się w każdym z powyżej.

Przypadki:

1. powrót false z wbudowanej obsługi zdarzeń uniemożliwia przeglądarce przejście do adresu łącza, ale nie powstrzymuje tego zdarzenia przed propagacją przez DOM.
2. zwrócenie false z obsługi zdarzeń jQuery uniemożliwia przeglądarce nawigację do adresu łącza i zatrzymuje rozprzestrzenianie się zdarzenia przez DOM.
3. zwracanie false ze zwykłej obsługi zdarzeń DOM nie robi absolutnie nic.

Zobaczą wszystkie trzy przykład.

1. inline return false.

<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. zwracanie false z obsługi zdarzenia 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. zwracanie false ze zwykłej obsługi zdarzenia DOM.

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

Mam nadzieję, że te przykłady są jasne. Spróbuj wykonać wszystkie te przykłady w pliku html, aby zobaczyć, jak działają.

Oto cytat z TUTAJ

Wydarzenie.preventDefault

Metoda preventDefault zapobiega wykonywaniu przez zdarzenie domyślnej funkcji. Na przykład, można użyć preventDefault na elemencie A, aby zatrzymać klikanie tego elementu przed opuszczeniem bieżącej strony:

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

Podczas gdy domyślna funkcjonalność elementu jest zamurowana, Zdarzenie nadal bąbelkuje w górę DOM.

Wydarzenie.stopropagacja

Druga metoda, stopPropagation, pozwala na wystąpienie domyślnej funkcjonalności zdarzenia, ale zapobiega rozprzestrzenianiu się zdarzenia:

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

Stopropagacja skutecznie powstrzymuje elementy rodzica przed wiedzą o danym zdarzeniu na jego dziecku.

O ile prosta metoda stop pozwala nam szybko obsługiwać zdarzenia, to ważne, aby pomyśleć o tym, co dokładnie chcesz się wydarzyć z bulgotanie. Założę się, że wszystko, czego naprawdę chce deweloper, to preventDefault 90% czasu! Nieprawidłowo "zatrzymując" an zdarzenie może spowodować liczne problemy w dół linii; wtyczki mogą nie działać i twój wtyczki innych firm mogą być zamurowane. Albo jeszcze gorzej - Twój kod łamie inne funkcjonalności na stronie.

Event.preventDefault-zatrzymuje domyślne zachowanie przeglądarki. Teraz pojawia się domyślne zachowanie przeglądarki. Załóżmy, że masz tag kotwicy i ma atrybut href, a ten tag kotwicy jest zagnieżdżony wewnątrz znacznika div, który ma Zdarzenie kliknięcia. Domyślnym zachowaniem znacznika zakotwiczenia jest kliknięcie znacznika zakotwiczenia, po którym powinien poruszać się, ale jakie zdarzenie.preventDefault robi to, aby zatrzymać nawigację w tym przypadku. Ale nigdy nie zatrzymuje bulgotania zdarzenia lub eskalacji zdarzenia TJ

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

The wynik będzie

"element został kliknięty"

"kontener został kliknięty"

Teraz event.Zatrzymanie zatrzymuje bulgotanie zdarzenia lub eskalację zdarzenia. Teraz z powyższym przykładem

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

Wynik będzie

"element został kliknięty"

Więcej informacji pod tym linkiem https://codeplanet.io/preventdefault-vs-stoppropagation-vs-stopimmediatepropagation/

event.preventDefault(); zatrzymuje domyślną akcję elementu.

event.stopPropagation(); zapobiega przedostawaniu się zdarzenia do drzewa DOM, co uniemożliwia Powiadamianie o zdarzeniu programów obsługi nadrzędnej.

Na przykład, jeśli wewnątrz DIV lub FORM jest dołączony link z metodą click, który również ma metodę click, uniemożliwi to uruchomienie metody click DIV lub FORM.

TL; DR
wydarzenie.preventDefault()
Zapobiega domyślnemu zachowaniu się przeglądarek (np. otwarciu łącza), ale nie powstrzymuje zdarzenia przed bulgotaniem DOM.

wydarzenie.stopropagacja()
zapobiega wystąpieniu bąbelkowania DOM, ale nie zatrzymuje domyślnego zachowania przeglądarek.

return false;
Zwykle spotykany w kodzie jQuery, zapobiega domyślnemu zachowaniu przeglądarek, zapobiega zdarzeniu od bubbling up the DOM, i natychmiast wraca z każdego oddzwaniania.

Należy sprawdzić to naprawdę ładne i łatwe 4 min przeczytać {[28] } z przykładami, z których powyższy fragment został skopiowany.

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