Какое CSS-свойство блокирует клики и ховеры на элементе

Что проверяют

Знаете ли вы pointer-events: none и, главное, чего это свойство не делает. Следом спрашивают, заблокирует ли оно клавиатуру и как правильно выключить кнопку.

Как отвечать

pointer-events управляет тем, может ли элемент быть целью событий указателя. Со значением none:

• клики и наведение проходят насквозь: событие получает то, что лежит под элементом. Поэтому свойство вешают на декоративный слой поверх контента, чтобы он не мешал кликать;
• :hover не срабатывает, свой cursor не показывается, подсказка из title тоже;
• потомки могут вернуть себе события: у дочернего элемента с pointer-events: auto клики работают и всплывают через родителя, так что его обработчик всё равно вызовется;
• обработчики остаются: el.click() из JS событие сгенерирует, а клавиатура работает как прежде. Кнопку можно выбрать Tab и нажать Enter.

Для HTML значимы только auto и none, остальные значения (visiblePainted, fill, stroke) относятся к SVG.

Если элемент нужно выключить по-настоящему, есть инструменты точнее:

• disabled у button, input, select: элемент не фокусируется, не срабатывает, скринридер объявляет его недоступным;
• атрибут inert: блокирует взаимодействие и фокус для всего поддерева и убирает его из дерева доступности. Подходит для контента под модальным окном;
• aria-disabled="true", если кнопка должна оставаться в фокусе и объяснять, почему недоступна. Действие тогда блокируют в обработчике.

Где спотыкаются

Думают, что pointer-events: none на оверлее закрывает доступ к элементам под ним. Происходит обратное: клики проходят сквозь оверлей.

Считают, что свойство полностью выключает элемент. Кнопка по-прежнему нажимается с клавиатуры, а это баг доступности и путь к двойной отправке формы.

Ставят вместе pointer-events: none и cursor: not-allowed, ожидая курсор-запрет. Он не появится: элемент больше не получает наведение.