JS властивість Event.cancelable
Загальний опис
Event.cancelable — це властивість, яка повертає булеве значення (true або false), що вказує, чи може певна подія бути скасована за допомогою методу preventDefault(). Деякі події можуть бути заблоковані від виконання своїх стандартних дій, тоді як інші не можуть бути змінені, навіть якщо викликати preventDefault().
Події, які можна скасувати (наприклад, події форми на кшталт submit або події click на посиланнях), мають властивість cancelable, встановлену в true. Це означає, що ви можете запобігти стандартній поведінці цієї події (наприклад, перезавантаженню сторінки після натискання кнопки відправлення форми) шляхом виклику preventDefault(). Якщо ж cancelable дорівнює false, навіть якщо ви викличете preventDefault(), це не матиме ефекту.
Наприклад:
document.querySelector('form').addEventListener('submit', function(event) {
if (event.cancelable) {
event.preventDefault();
console.log('Відправлення форми скасовано.');
} else {
console.log('Цю подію не можна скасувати.');
}
});
У цьому прикладі подія submit є скасованою, тому ми можемо викликати preventDefault() і запобігти відправленню форми.
Властивість cancelable є важливою при розробці динамічних взаємодій з користувачем, де треба запобігти виконанню дій за замовчуванням (наприклад, навігація при натисканні на посилання або оновлення сторінки). У випадках, коли ця властивість дорівнює false, подія не може бути змінена, що може бути пов'язано з її критичним значенням для поведінки сторінки або браузера.
Важливо також пам'ятати, що не всі події мають значення cancelable. Це може залежати від типу події або від того, як подія була створена. Наприклад, події, створені вручну за допомогою new Event(), за замовчуванням не є скасованими, якщо ви не вкажете це явно.
| Порада: | У деяких браузерах можна скасувати тільки певні події, тому варто завжди тестувати функціонал у різних середовищах, особливо якщо ваш додаток працює на старих або менш поширених версіях браузерів. |
| Порада: | Не всі події, що можуть бути скасовані, обов'язково потрібно скасовувати. Завжди розглядайте потребу в скасуванні стандартної поведінки, адже іноді стандартна поведінка браузера є очікуваною для користувачів, наприклад, натискання клавіші |
| Порада: | Якщо вам потрібно скасувати кілька подій одночасно (наприклад, |
Синтаксис
event.cancelableЗначення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1.5 |
1 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
14.5.0 |
1.0 |
Приклади
Цей приклад демонструє, як можна керувати скасуванням події submit у формі залежно від стану перемикача. Якщо перемикач активований, то при спробі відправлення форми стандартна поведінка скасовується за допомогою preventDefault(). Якщо перемикач вимкнено, форма відправляється без обмежень. Це дозволяє наочно побачити, як працює властивість cancelable у реальних сценаріях.
Цей приклад демонструє, як можна скасувати стандартну поведінку посилання. При натисканні на посилання за допомогою події click, яка є скасованою, ми запобігаємо переходу за URL, використовуючи preventDefault().
document.querySelector('a').addEventListener('click', function(event) {
if (event.cancelable) {
event.preventDefault();
console.log('Перенаправлення скасовано.');
}
});У цьому прикладі ми відстежуємо натискання клавіші Enter. Якщо подія є скасованою, викликається preventDefault(), що запобігає виконанню стандартної дії, наприклад, підтвердження форми або активації кнопки.
document.addEventListener('keydown', function(event) {
if (event.key === 'Enter' && event.cancelable) {
event.preventDefault();
console.log('Натискання клавіші Enter скасовано.');
}
});