Mi a különbség az event.preventDefault és az event.stopPropagation között?

event.preventDefault() megszünteti a böngésző alapértelmezett műveletét egy eseményhez (például, kattintáskor történő navigáció <a>-nál), és event.stopPropagation() megállítja az esemény terjedését vagy buborékolását a DOM-fán, így ugyanazokat a kezelőket nem hívja meg a szülő vagy gyermek elemeknél.

Példa:

// Tegyük fel, van egy link egy div belsejében
const link = document.querySelector('a');
const div = document.querySelector('div');

// Kattintás kezelő a linken
link.addEventListener('click', (event) => {
  alert('Linkre kattintottak');
  event.preventDefault(); // Megakadályozza a navigációt
});

// Kattintás kezelő a div-en
div.addEventListener('click', (event) => {
  alert('Divre kattintottak');
  // `event.stopPropagation()` nélkül ez a kezelő a link kattintás után fut
});

Ha hozzáadjuk az event.stopPropagation()-t a linkhez:

// Link kattintás és terjedés megállítása
link.addEventListener('click', (event) => {
  alert('Linkre kattintottak');
  event.preventDefault();
  event.stopPropagation(); // Megállítja az esemény terjedését a div felé
});

// Kattintás kezelő a div-en
div.addEventListener('click', (event) => {
  alert('Div'); // Ez az alert nem fog megjelenni a link kattintásakor
});

Összefoglaló táblázat:

Módszer	Cselekvés	Hatás az alapértelmezett viselkedésre	Hatás az esemény terjedésére
event.preventDefault()	Az alapértelmezett böngésző művelet megszüntetése	Igen	Nem
event.stopPropagation()	Az esemény terjedésének vagy buborékolásának megállítása	Nem	Igen