Что такое preventDefault в JavaScript

У многих событий в браузере есть стандартное действие. У ссылки это переход по адресу. У формы это отправка. У правого клика это контекстное меню. У некоторых клавиш это ввод, прокрутка или submit формы.

event.preventDefault() говорит браузеру: стандартное действие выполнять не нужно. Само событие при этом не исчезает. Другие обработчики могут выполниться. Событие может всплыть к родителям, а флаг event.defaultPrevented станет true.

Короткий ответ на интервью удобно строить так: сначала скажите, какое поведение отменяется. Потом отдельно скажите, чего метод не делает.

preventDefault отменяет стандартное действие браузера для события, например отправку формы или переход по ссылке. Он не останавливает всплытие. Если нужно остановить всплытие, это отдельная задача для stopPropagation.

Критерий простой. Вызывайте preventDefault, когда вы осознанно берете стандартное поведение под контроль и можете заменить его понятным сценарием.

Например, форма отправляется через API, а не обычной перезагрузкой страницы. Тогда вы отменяете стандартную отправку, валидируете данные, показываете ошибки и делаете запрос.

function SignupForm() {
  const [status, setStatus] = React.useState("idle");
  const [error, setError] = React.useState("");

  async function handleSubmit(event) {
    event.preventDefault();

    if (status === "loading") return;

    const form = event.currentTarget;
    const data = new FormData(form);
    const email = String(data.get("email") || "").trim();

    if (!email) {
      setError("Укажите email");
      return;
    }

    setStatus("loading");
    setError("");

    try {
      const response = await fetch("/api/signup", {
        method: "POST",
        body: data,
      });

      if (!response.ok) {
        throw new Error("Request failed");
      }

      setStatus("success");
    } catch {
      setError("Не удалось отправить форму. Попробуйте еще раз.");
      setStatus("idle");
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <label htmlFor="email">Email</label>
      <input
        id="email"
        name="email"
        type="email"
        aria-describedby={error ? "email-error" : undefined}
      />
      {error && <p id="email-error">{error}</p>}
      <button type="submit" disabled={status === "loading"}>
        {status === "loading" ? "Sending..." : "Send"}
      </button>
    </form>
  );
}

Практический вывод такой. Отмена стандартного действия должна идти вместе с явным следующим шагом. Иначе пользователь нажмет кнопку, ничего не произойдет, а интерфейс будет выглядеть сломанным. В форме сразу подумайте про ошибку, loading, повторный submit и доступную связь ошибки с полем. Если API авторизуется cookie, не отключайте CSRF-защиту только потому, что запрос идет через fetch.

preventDefault не управляет маршрутом события по DOM. Если вы кликнули по ссылке внутри карточки, отмена перехода по ссылке не остановит обработчик карточки.

card.addEventListener("click", () => {
  console.log("card click");
});

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

В этом примере браузер не перейдет по ссылке, но обработчик карточки все равно сработает при всплытии. Если именно это нежелательно, нужен отдельный вызов stopPropagation. Но не добавляйте его автоматически. Родительские обработчики могут отвечать за аналитику, закрытие меню или фокус.

С формами частая ошибка такая: отменить клик по кнопке, но не обработать сам submit. Это выглядит рабочим, пока пользователь нажимает только мышью. Потом он нажимает Enter, и форма уходит обычным способом.

Еще одна ловушка: после preventDefault вызвать form.submit() как будто это безопасное продолжение. Такой вызов может обходить событие submit и встроенную валидацию браузера. Если вам нужно инициировать нормальную отправку формы программно, чаще подходит requestSubmit(). Но не вызывайте его без защиты прямо из того же submit-обработчика. Иначе легко получить цикл или двойной запрос. Если вы отправляете через API, делайте это явно и контролируйте loading, ошибку и повторную отправку.

Не каждое событие можно отменить. Для проверки есть свойство event.cancelable. Если оно равно false, вызов preventDefault не отменит стандартное действие.

Для производительности браузеры используют passive listeners. В таком обработчике вы как бы обещаете, что не будете отменять стандартное действие. Если внутри passive listener вызвать preventDefault, браузер проигнорирует вызов. Это особенно важно для wheel, touchstart и touchmove, потому что от них зависит плавность прокрутки.

window.addEventListener(
  "touchmove",
  (event) => {
    if (event.cancelable) {
      event.preventDefault();
    }
  },
  { passive: false }
);

Такой код не стоит копировать без причины. Блокировка прокрутки может ухудшить UX. Сначала проверьте, нельзя ли решить задачу через CSS, например touch-action, или через нормальную структуру модального окна.

На интервью не нужно читать лекцию про весь Event API. Достаточно дать точное определение, назвать отличие от всплытия и показать, что вы понимаете риск.

Хорошая короткая формулировка:

preventDefault отменяет стандартное действие браузера у события, например переход по ссылке или отправку формы. Он не останавливает всплытие, поэтому stopPropagation это отдельный инструмент. Я использую preventDefault, когда сам реализую замену стандартного поведения, например валидирую форму и отправляю данные через API.

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