preventDefault: отмена действия по умолчанию

Здесь будет встроен видео-разбор темы (5–7 минут, YouTube / RuTube / VK Видео) — тем, кто лучше воспринимает на слух, текст ниже не обязателен.

Действие по умолчанию — реакция браузера, зашитая в саму разметку. JavaScript для неё не нужен: ссылка ходит, форма отправляется, галочка ставится, потому что так описан HTML. Событие здесь не причина действия, а объявление о нём — браузер сначала рассылает click или submit всем слушателям и только потом делает своё дело.

Событие	Что браузер делает сам
click по ссылке	переход по адресу из href
submit у формы	отправка данных и переход на action
click по чекбоксу	переключение галочки
keydown в поле ввода	вставка символа в текст
contextmenu	системное меню правой кнопки
wheel над страницей	прокрутка

Именно этот порядок даёт окно для вмешательства: пока обработчики выполняются, действия ещё не было. С чекбоксом браузер даже слегка жульничает — переключает галочку заранее, чтобы обработчик видел новое состояние, и откатывает обратно, если отмену всё-таки попросили.

js

const plain = document.getElementById("plain");
const guarded = document.getElementById("guarded");

guarded.addEventListener("click", (event) => {
  event.preventDefault();
});

plain.click();
guarded.click();

console.log(plain.checked);
console.log(guarded.checked);

страница примера

Сначала предположите, что выведет код

Метод вызывают внутри обработчика, и на этом всё. Он ничего не возвращает, не бросает исключений и не прерывает функцию: код после него выполняется как ни в чём не бывало. Отменяется ровно одна вещь — встроенное действие браузера.

js

const form = document.getElementById("form");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  const data = new FormData(form);
  console.log(data.get("login"));
});

form.requestSubmit();
console.log("страница на месте");

страница примера

Сначала предположите, что выведет код

Так устроена любая форма, которая отправляет данные сама: отменить, собрать значения, послать fetch. Со ссылками то же самое — на этом стоят клиентские роутеры: клик перехватывают, адрес меняют через History API, страницу перерисовывают без перезагрузки.

И главное, чего не делает preventDefault(): он не останавливает событие. Оно продолжит идти по остальным слушателям и всплывать к родителям — за это отвечает stopPropagation(), совсем другой метод.

js

const link = document.getElementById("link");

link.addEventListener("click", (event) => {
  event.preventDefault();
  console.log("первый слушатель");
});

link.addEventListener("click", (event) => {
  console.log(event.defaultPrevented);
});

link.click();
console.log(location.hash === "#end");

страница примера

Сначала предположите, что выведет код

Старый приём — вернуть false из обработчика — работает у обработчиков вида on… — и в атрибуте разметки onclick, и при присваивании свойству link.onclick. У слушателя, повешенного через addEventListener, возвращённое значение никто не читает: там либо preventDefault(), либо ничего.

Отмена оставляет след. У события есть булево свойство defaultPrevented: пока никто не звал preventDefault() — false, после вызова — true. Флаг лежит на самом объекте события, а объект один на весь путь, поэтому его видят и следующие слушатели того же элемента, и все родители, до которых событие всплывёт.

js

const panel = document.getElementById("panel");
const inner = document.getElementById("inner");

inner.addEventListener("click", (event) => {
  event.preventDefault();
});

panel.addEventListener("click", (event) => {
  console.log(event.target === inner);
  console.log(event.defaultPrevented);
});

inner.click();

страница примера

Сначала предположите, что выведет код

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

Отмена — не право, а разрешение, и дают его не всегда. Первое условие — свойство cancelable. Если оно false, вызов просто ничего не делает: ни ошибки, ни предупреждения, тишина. Такими приходят события-уведомления о свершившемся, например input и change: отменять там нечего, всё уже случилось. Но и true не обещает, что отмене есть что остановить. В Firefox cancelable равен true у scroll, а в Chrome — у transitionend, которым браузер сообщает о конце перехода CSS. defaultPrevented после вызова станет true, но прокрутка уже случилась, а переход уже доехал. Для своих событий удобна проверка через возвращаемое значение dispatchEvent(): false означает «отменили».

js

const widget = document.getElementById("widget");

widget.addEventListener("close", (event) => {
  event.preventDefault();
});

const strict = new CustomEvent("close", { cancelable: true });
console.log(widget.dispatchEvent(strict));
console.log(strict.defaultPrevented);

const loose = new CustomEvent("close");
console.log(loose.cancelable);
console.log(widget.dispatchEvent(loose));
console.log(loose.defaultPrevented);

страница примера

Сначала предположите, что выведет код

Второе условие — слушатель не должен быть пассивным. { passive: true } — обещание браузеру ничего не отменять; взамен браузер не ждёт код и прокручивает страницу сразу. Обещание проверяется: preventDefault() внутри такого слушателя игнорируется. Для touchstart, touchmove и wheel на уровне документа пассивность включена по умолчанию — если прокрутку правда надо отменять, её выключают явно через { passive: false }.

js

const area = document.getElementById("area");

area.addEventListener("zoom", (event) => {
  event.preventDefault();
}, { passive: true });

const event = new CustomEvent("zoom", { cancelable: true });
area.dispatchEvent(event);

console.log(event.cancelable);
console.log(event.defaultPrevented);

страница примера

Сначала предположите, что выведет код

Отменять нужно синхронно, пока событие рассылается. Если обработчик async и preventDefault() оказался после await, браузер давно сделал своё дело. Коварство в том, что флаг всё равно поднимется: defaultPrevented честно скажет true, а галочка при этом будет стоять. Отсюда правило — сначала отменить, потом ждать.

js

const box = document.getElementById("box");

box.addEventListener("click", async (event) => {
  await Promise.resolve();
  event.preventDefault();
  console.log(event.defaultPrevented);
  console.log(box.checked);
});

box.click();

страница примера

Сначала предположите, что выведет код

Правило простое: отменяй только то, чему нашёл замену. preventDefault() на форме без собственной отправки — это форма, которая молча ничего не делает. Отмена перехода без своей навигации — ссылка в никуда.

За действием по умолчанию стоят привычки пользователя, и они дороже удобства кода. Перехваченный клик ломает Ctrl+клик и открытие в новой вкладке, если код не пропускает такие клики дальше. Отмена wheel и touchmove ломает прокрутку — главная причина страниц, которые «залипают» на телефоне. Отмена keydown в поле мешает вставке и работе с клавиатуры. Всё это допустимо, но за это надо честно отработать.

Достаточно посмотреть на модификаторы: если нажат Ctrl, Cmd или Shift, пользователь обращается к браузеру, а не к вам. Выходим из обработчика без отмены — и ссылка открывается как обычно.

js

const link = document.getElementById("link");

link.addEventListener("click", (event) => {
  if (event.metaKey || event.ctrlKey || event.shiftKey) {
    console.log("отдаём браузеру");
    return;
  }

  event.preventDefault();
  console.log("рисуем сами");
});

link.click();
link.dispatchEvent(new MouseEvent("click", { ctrlKey: true, bubbles: true, cancelable: true }));

страница примера

Сначала предположите, что выведет код

Действие по умолчанию — встроенная реакция браузера на событие: переход по ссылке, отправка формы, переключение чекбокса. Событие приходит раньше действия, поэтому у кода есть окно, чтобы вмешаться.
event.preventDefault() отменяет только это встроенное действие. Он не прерывает функцию, не останавливает всплытие и не мешает другим слушателям — за остановку отвечает stopPropagation().
event.defaultPrevented — след отмены на самом объекте события. Его видят все, кто получит событие следом, включая родителей: так разные слои кода договариваются, кто уже отработал.
Отмена не сработает при cancelable === false, в слушателе с { passive: true } и после await. Исключения не будет — просто ничего не произойдёт, а флаг в последнем случае ещё и соврёт.
Отменяйте только то, что заменяете своим поведением, и оставляйте браузеру клики с модификаторами, прокрутку и клавиатуру.

1/3У чекбокса единственный обработчик click, и он вызывает event.preventDefault(). Что покажет box.checked сразу после box.click()?

2/3На ссылке два обработчика click. Первый вызывает preventDefault(). Что произойдёт со вторым?

3/3Слушатель добавлен как addEventListener("wheel", handler, { passive: true }), и внутри вызывается preventDefault(). Что будет?

Форма, которая остаётся на странице

В разметке форма поиска. Повесьте обработчик submit, отмените отправку и выведите значение поля q через FormData. Затем запустите отправку из кода — form.requestSubmit() ведёт себя как настоящее нажатие кнопки.

js

const form = document.getElementById("search");

form.addEventListener("submit", (event) => {
  // 1. отмените действие по умолчанию
  // 2. выведите значение поля q
});

// 3. запустите отправку из кода

console.log(form.id); // search

страница примера

Сначала предположите, что выведет код

Отменяем событие первым делом, пока браузер ещё ждёт, и только потом читаем данные.

jsлистинг · не запускается

const form = document.getElementById("search");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  console.log(new FormData(form).get("q")); // события
});

form.requestSubmit();

const form = document.getElementById("search");

form.addEventListener("submit", (event) => {
  event.preventDefault();
  console.log(new FormData(form).get("q")); // события
});

form.requestSubmit();

Без preventDefault() браузер отправил бы форму и перезагрузил страницу — вывод исчез бы вместе с ней. Обратите внимание на requestSubmit(): он, в отличие от form.submit(), сначала проверяет валидность и порождает событие submit. Если бы у поля стоял required и оно было пустым, обработчик просто не вызвался бы.

Не отменяй дважды

У первой ссылки уже есть свой обработчик с отменой. Напишите обработчик на контейнере, который берёт переход на себя только тогда, когда действие ещё никто не отменил, а иначе отходит в сторону. Проверьте на обеих ссылках.

js

const panel = document.getElementById("panel");
const one = document.getElementById("one");
const two = document.getElementById("two");

one.addEventListener("click", (event) => {
  event.preventDefault();
});

// здесь ваш обработчик на panel

console.log(panel.children.length); // 2

страница примера

Сначала предположите, что выведет код

Флаг defaultPrevented проверяем до того, как что-то делать: событие всплыло от ссылки к контейнеру уже с поднятым флагом.

jsлистинг · не запускается

panel.addEventListener("click", (event) => {
  if (event.defaultPrevented) {
    console.log("уже отменено: " + event.target.id);
    return;
  }

  event.preventDefault();
  console.log("беру на себя: " + event.target.id);
});

one.click(); // уже отменено: one
two.click(); // беру на себя: two

panel.addEventListener("click", (event) => {
  if (event.defaultPrevented) {
    console.log("уже отменено: " + event.target.id);
    return;
  }

  event.preventDefault();
  console.log("беру на себя: " + event.target.id);
});

one.click(); // уже отменено: one
two.click(); // беру на себя: two

Так пишут обработчики на контейнерах и в библиотеках: более конкретный код имеет приоритет, а общий не мешает ему работать.

preventDefault: отмена действия по умолчанию

Видеоразбор темы за 5–7 минут

Что браузер делает самКлик, отправка, галочка — без единой строки JS

preventDefault()Одна строка — и браузер стоит на месте

defaultPreventedСлед отмены, который видят все следом

Когда отменить нельзяcancelable, passive и опоздавший вызов

Отменять вежливоНе ломайте то, чему нет замены

Итогошпаргалка по теме

Проверьте себятри быстрых вопроса

Задачидве задачи с решениями

Форма, которая остаётся на странице

Не отменяй дважды