Вебсправочник
Ваш первый сайт

preventDefault: отмена стандартного действия

Метод preventDefault отменяет стандартное действие события, если оно допускает отмену и обработчик может это сделать.

Назначение

Метод preventDefault отменяет стандартное действие события, если оно допускает отмену и обработчик может это сделать.

Как это работает

Например, событие submit позволяет остановить обычную отправку формы для учебной проверки. Это не равно stopPropagation: отмена действия и распространение события относятся к разным механизмам.

Пример

const form=document.querySelector("[data-demo-form]");
const output=document.querySelector("[data-demo-output]");
if(form&&output){form.addEventListener("submit",event=>{
event.preventDefault();
output.textContent="Учебный режим: данные не отправлены";
});}

Что должно получиться

Штатная отправка остановлена, а текст прямо сообщает об отсутствии передачи. Пример не имитирует успех и требует реальной формы в собственной странице.

Граница применения и частая ошибка

Не отменяйте все клики на ссылках только ради своего обработчика. Это может сломать привычное открытие вкладок и другие возможности браузера. У passive-обработчика отмена также ограничена.

Самостоятельная проверка

Сделайте локальную форму и остановите её submit, показывая честное сообщение о демонстрационном режиме. Затем объясните, чем это отличается от успешной отправки данных.

Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.