JS властивість Event.defaultPrevented

Загальний опис

defaultPrevented – це властивість об’єкта події (Event), яка дозволяє визначити, чи було скасовано стандартну поведінку події за допомогою методу preventDefault(). Ця властивість повертає логічне значення (true або false), де true означає, що дія події була скасована, а false – що не була.

Зазвичай, метод preventDefault() використовується для запобігання виконанню стандартних дій браузера, таких як перехід за посиланням або відправка форми. Використовуючи defaultPrevented, можна дізнатися, чи було викликано preventDefault() на поточній події, що може бути корисно в ситуаціях, коли необхідно адаптувати логіку залежно від стану події.

Наприклад, розглянемо подію click на кнопці. Якщо виконати event.preventDefault(), а потім перевірити event.defaultPrevented, то остання властивість поверне true:

document.querySelector('button').addEventListener('click', function(event) {
  event.preventDefault();
  if (event.defaultPrevented) {
    console.log('Дія події була скасована');
  }
});

Вище ми додаємо обробник події click, де preventDefault() скасовує дію, після чого перевіряємо defaultPrevented, щоб підтвердити, що дія була скасована.

Зазвичай, defaultPrevented використовується для того, щоб адаптувати поведінку події залежно від її статусу. Це особливо корисно у випадках, коли один і той самий обробник подій викликається для декількох елементів або дій, де важливо визначити, чи була якась дія скасована іншими обробниками подій.

правити

Порада

Не плутайте defaultPrevented із властивістю cancelable. Перша показує, чи була подія скасована, а друга вказує, чи можна її скасувати взагалі. Перш ніж перевіряти defaultPrevented, упевніться, що подія є cancelable.

автор: Bond правити

Порада

При роботі з бібліотеками або стороннім кодом, defaultPrevented допомагає відстежити, як саме поведінка події змінюється під час виконання. Це дає можливість налагоджувати складніші сценарії, коли декілька обробників працюють одночасно.

автор: Bond правити

Порада

Використання defaultPrevented може спростити налагодження і розуміння коду при обробці різних типів подій. Наприклад, якщо події генеруються динамічно і є важливим знати, чи вони мали скасовану поведінку.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

event.defaultPrevented

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	5	6	5	11	12	9

Підтримка: мобільні переглядачі

Переглядач
	3	18	6	5

Підтримка: серверні переглядачі

Переглядач
	14.5.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

<a href="#demo">перше посилання</a>
<a href="#demo2">друге посилання</a>

document.querySelector('a').addEventListener('click', function(event) {
  event.preventDefault();
  setTimeout(() => {
    if (event.defaultPrevented) {
      console.log('Посилання не буде відкрите.');
    }
  }, 100);
});

document.addEventListener('submit', function(event) {
  event.preventDefault();
  if (event.defaultPrevented) {
    console.log('Відправлення форми скасовано користувачем.');
  }
});