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

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

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

Значение false не мешает останавливать распространение события через stopPropagation(). Отмена действия и распространение — разные механизмы.

Например, отмена click на ссылке может предотвратить переход. Событие scroll неотменяемое: для управления прокруткой рассматривайте отменяемые wheel или touchmove с непассивным обработчиком.

Посмотрите сравнение отменяемого и неотменяемого события.

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

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

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

Показать браузеры
Совместимостьapi.Event.cancelable
ВозможностьКомпьютерыМобильные
ChromeEdgeFirefoxOperaSafariChrome AndroidFirefox for AndroidOpera AndroidSafari on iOSSamsung BrowserWebView AndroidWebView on iOS
cancelable✓1✓12✓1.5✓≤12.1✓1✓18✓4✓≤12.1✓1✓1.0✓4.4✓1

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

JavaScript синтаксис

JavaScript
event.cancelable;

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

DOM Standard.

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

Проверка возможности отмены действия

Нажмите ▶, затем нажмите ссылку и кнопку отправки формы в результате: оба действия отменяются, а в консоли появится тип отменённого события. Уберите вызов preventDefault() и сравните.

index.html
HTML
<a href="https://www.google.ru">Перейти на сайт Google</a>
<form>
  <input type="text" />
  <input type="submit" value="Отправить" />
</form>
main.js
JavaScript
const a = document.querySelector('a'), // находим первый элемент <a> в документе
    form = document.querySelector('form') // находим первый элемент <form> в документе

a.addEventListener('click', preventEvent) // регистрируем обработчик события "click" для элемента <a>
form.addEventListener('submit', preventEvent) // регистрируем обработчик события "submit" для элемента <form>

function preventEvent(event) {
    if (event.cancelable) {
        //  если событие может быть отменено и предотвращено
        event.preventDefault() // отменяем действие события по умолчанию
        console.log('Событие ' + event.type + ' отменено') //  выводим в консоль информацию о том какое событие было отменено
    } else {
        //  если событие не может быть отменено и предотвращено
        console.warn('Событие ' + event.type + ' не может быть отменено') //  выводим в консоль информацию о том, что данное событие не может быть отменено
    }
}
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> и элемент <form> в документе. С помощью метода addEventListener() зарегистрировали обработчики события "click" (нажатие левой кнопкой мыши на элементе) для элемента <a> и зарегистрировали обработчики события "submit" (отправка формы) для элемента <form>.

В обработчике мы проверяем свойство cancelable: для отменяемого события вызываем preventDefault(), а для неотменяемого выводим предупреждение в консоль.

Обратите внимание, что для определения типа события мы используем свойство type объекта Event.

Когда preventDefault() отменяет действие

Нажмите ▶. Сравните результаты для cancelable: true и false, затем измените passive на true и запустите снова.

index.html
HTML
<p>Результаты сравнения выводятся в консоль.</p>
main.js
JavaScript
const target = new EventTarget()
const passive = false // Измените на true: отмена перестанет действовать.
target.addEventListener(
    'check',
    (event) => {
        event.preventDefault() // Для cancelable: false исключения нет.
        console.log('cancelable:', event.cancelable, 'defaultPrevented:', event.defaultPrevented)
    },
    { passive }
)
for (const cancelable of [true, false]) {
    const event = new Event('check', { cancelable })
    console.log('dispatchEvent вернул:', target.dispatchEvent(event))
}