JavaScript свойство Event.defaultPrevented

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

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

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

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

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

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

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

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

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

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
defaultPrevented	✓5	✓12	✓6	✓11	✓5	✓18	✓6	✓11	✓5	✓1.0	✓3	✓5

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

JavaScript синтаксис

event.defaultPrevented;

Спецификация

DOM Standard.

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

Состояние до и после отмены действия

Нажмите ▶ и кликните по ссылке в результате: переход не выполнится, а в консоли появятся значения false (до вызова preventDefault()) и true (после).

index.html

HTML

<a href="https://www.google.ru">Перейти на сайт Google</a>

main.js

JavaScript

const a = document.querySelector('a') // находим первый элемент <a> в документе;
a.addEventListener('click', preventEvent) // регистрируем обработчик события "click" для элемента <a>

function preventEvent(event) {
    console.log(event.defaultPrevented) //  выводим в консоль информацию о том вызывался ли метод preventDefault() для этого объекта событий, или нет
    event.preventDefault() // отменяем действие события по умолчанию
    console.log(event.defaultPrevented) //  выводим в консоль информацию о том вызывался ли метод preventDefault() для этого объекта событий, или нет
}

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

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

В обработчике мы выводим значение defaultPrevented до и после вызова preventDefault(): сначала false, затем true, так как событие click на ссылке отменяемое.