Mis vahe on event.preventDefault ja event.stopPropagation vahel?

event.preventDefault() tühistab brauseri vaikimisi tegevuse sündmuse ajal (näiteks <a> lingile klikkides), samas kui event.stopPropagation() peatab sündmuse leviku või süvenemise DOM-puusse, vältides sama töötleja käivitamist vanem- või laps-elementidel.

Näide:

// Oletame, et on link divi sees
const link = document.querySelector('a');
const div = document.querySelector('div');

// Kliki sündmuse töötleja lingile
link.addEventListener('click', (event) => {
  alert('Klõps linkil');
  event.preventDefault(); // Tühistab lingi navigeerimise
});

// Kliki sündmuse töötleja divil
div.addEventListener('click', (event) => {
  alert('Klõps divil');
  // Ilma event.stopPropagation()-ita käivitatakse see pärast klikki lingil
});

Kui lisada event.stopPropagation() lingi töötlejale:

// Kliki sündmuse töötleja lingil ja leviku peatamine
link.addEventListener('click', (event) => {
  alert('Klõps linkil');
  event.preventDefault();
  event.stopPropagation(); // peatab sündmuse leviku divini
});

// Kliki sündmuse töötleja divil
div.addEventListener('click', (event) => {
  alert('Klõps divil'); // See alert ei ilmu, kui klõpsata lingil
});

Kokkuvõte:

Meetod	Toiming	Mõju brauseri vaikimisi käitumisele	Mõju sündmuse levikule
event.preventDefault()	Tühistab brauseri vaikimisi tegevuse	Jah	Ei
event.stopPropagation()	Peatab sündmuse leviku või süvenemise	Ei	Jah