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 використовується для того, щоб адаптувати поведінку події залежно від її статусу. Це особливо корисно у випадках, коли один і той самий обробник подій викликається для декількох елементів або дій, де важливо визначити, чи була якась дія скасована іншими обробниками подій.
| Порада: | Не плутайте |
| Порада: | При роботі з бібліотеками або стороннім кодом, |
| Порада: | Використання |
Синтаксис
event.defaultPreventedЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
5 |
6 |
5 |
11 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
3 |
18 |
6 |
5 |
| Переглядач | ||
|---|---|---|
14.5.0 |
1.0 |
Приклади
У цьому прикладі користувач може обирати, чи дозволити відправлення форми, натискаючи на перемикач. При надсиланні форми програма перевіряє, чи була поведінка скасована, і відповідно відображає повідомлення. Це надає можливість динамічно керувати поведінкою події, залежно від вибору користувача, що робить defaultPrevented корисним інструментом для інтерактивного інтерфейсу.
Цей приклад демонструє використання defaultPrevented для перевірки, чи було скасовано стандартну поведінку форми. Це корисно для форм, коли необхідно заборонити відправлення в умовах, заданих користувачем.
document.addEventListener('submit', function(event) {
event.preventDefault();
if (event.defaultPrevented) {
console.log('Відправлення форми скасовано користувачем.');
}
});У прикладі ми затримуємо перевірку на скасування поведінки. Це дозволяє динамічно визначити, чи скасування все ще актуальне через деякий час.
document.querySelector('a').addEventListener('click', function(event) {
event.preventDefault();
setTimeout(() => {
if (event.defaultPrevented) {
console.log('Посилання не буде відкрите.');
}
}, 100);
});