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(), за замовчуванням не є скасованими, якщо ви не вкажете це явно.

правити

Порада

У деяких браузерах можна скасувати тільки певні події, тому варто завжди тестувати функціонал у різних середовищах, особливо якщо ваш додаток працює на старих або менш поширених версіях браузерів.

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

Порада

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

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

Порада

Якщо вам потрібно скасувати кілька подій одночасно (наприклад, click і keydown), перевірте кожну подію окремо на скасованість і тільки після цього викликайте preventDefault(). Це допоможе уникнути непередбачуваних помилок.

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

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

Синтаксис

event.cancelable

Переглядачі

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

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

Переглядач
	1	1.5	1	≤12.1	12	9

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

Переглядач
	4.4	18	4	1

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

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

Приклади

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

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

document.querySelector('a').addEventListener('click', function(event) {
    if (event.cancelable) {
        event.preventDefault();
        console.log('Перенаправлення скасовано.');
    }
});

document.addEventListener('keydown', function(event) {
    if (event.key === 'Enter' && event.cancelable) {
        event.preventDefault();
        console.log('Натискання клавіші Enter скасовано.');
    }
});