event.preventDefault()event.preventDefault() останавливает стандартное поведение браузера, связанное с событием, но не влияет на то, как событие распространяется по DOM.
Типичные случаи использования:
hreflink.addEventListener('click', (event) => {
event.preventDefault(); // Ссылка не выполнит переход
console.log('Клик произошел, но навигация не выполнена');
});
event.stopPropagation()Эти два метода решают разные задачи и часто путаются между собой:
event.preventDefault() — отменяет стандартное действие браузера, но событие продолжает всплывать или захватываться по DOMevent.stopPropagation() — останавливает распространение события дальше по DOM (всплытие или захват), но не влияет на стандартное поведение браузера| Метод | Останавливает стандартное действие | Останавливает распространение |
|---|---|---|
preventDefault() | ✅ Да | ❌ Нет |
stopPropagation() | ❌ Нет | ✅ Да |
Ты также можешь комбинировать оба метода, если нужно предотвратить стандартное поведение и остановить распространение одновременно:
element.addEventListener('click', (event) => {
event.preventDefault();
event.stopPropagation();
});
Используй preventDefault(), чтобы переопределить то, что браузер делает с событием, и stopPropagation(), чтобы контролировать, как событие распространяется по DOM. Они независимы друг от друга и служат разным целям.
event.preventDefault() останавливает распространение события вверх по DOM и предотвращает его достижение родительских элементов.
Новый — ещё не проверен сообществом
Вы