JavaScript метод Event.preventDefault()

Определение и применение

JavaScript метод preventDefault() объекта Event при вызове отменяет действие события по умолчанию. Событие продолжает распространяться как обычно, только с тем исключением, что событие ничего не делает.

Большинство событий в браузере, которые можно отменить, являются результатом взаимодействия пользователя со страницей. Например, отмена событий click, или scroll предотвращает пользователей от нажатия на что-то, перехода на другую страницу, или от прокручивания страницы.

Поддержка браузерами

Спецификация: dom.spec.whatwg

✓Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьapi.Event.preventDefault

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
preventDefault	✓1	✓12	✓1	✓7	✓1	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1

✓ поддерживается◐ с ограничениями× нет поддержки? нет данных≤31 — не позднее версии 31

JavaScript синтаксис:

event.preventDefault()

Версия JavaScript

Пример использования

<!DOCTYPE html>
<html>
  <head>
    <title
      >Использование JavaScript свойства cancelable и метода preventDefault() объекта Event</title
    >
  </head>
  <body>
    <a href="https://www.google.ru">Перейти на сайт Google</a>
    <form>
      <input type="text" />
      <input type="submit" value="Отправить" />
    </form>
    <script>
      const a = document.querySelector("a"), // находим первый элемент <a> в документе
        form = document.querySelector("form"); // находим первый элемент <form> в документе

      a.addEventListener("click", preventEvent); // регистрируем обработчик события "click" для элемента <a>
      form.addEventListener("submit", preventEvent); // регистрируем обработчик события "submit" для элемента <form>

      function preventEvent(event) {
        if (event.cancelable) {
          //  если событие может быть отменено и предотвращено
          event.preventDefault(); // отменяем действие события по умолчанию
          console.log("Событие " + event.type + " отменено"); //  выводим в консоль информацию о том какое событие было отменено
        } else {
          //  если событие не может быть отменено и предотвращено
          console.warn("Событие " + event.type + " не может быть отменено"); //  выводим в консоль информацию о том, что данное событие не может быть отменено
        }
      }
    </script>
  </body>
</html>

В этом примере мы с использованием метода querySelector() выбрали первый HTML элемент <a> и элемент <form> в документе. С помощью метода addEventListener() зарегестрировали обработчики события "click" (нажатие левой кнопкой мыши на элементе) для элемента <a> и зарегистрировали обработчики события "submit" (отправка формы) для элемента <form>.

При срабатывании одного из этих событий вызывается функция, которая с помощью свойства cancelable объекта Event проверяет может ли событие быть отменено и предотвращено, если да, то с использованием метода preventDefault() мы отменяем действие этого события по умолчанию и выводим в консоль информацию о том какое событие было отменено. Если значение свойства cancelable объекта Event будет соответствовать значению falsе, то в консоль будет выведена информация о тоо том, что данное событие не может быть отменено.

Обратите внимание, что для определения типа события мы используем свойство type объекта Event.

Результат нашего примера: