Коротко: pointer-events — свойство CSS, которое управляет тем, реагирует ли элемент на клики, наведение и касания. Два значения: auto (реагирует, обычное поведение) и none (элемент «прозрачен» для мыши — клики проходят сквозь него). Это не удаление из разметки, а отключение интерактивности.
Два значения свойства
| Значение | Поведение | Типичное применение |
|---|---|---|
auto |
элемент реагирует как обычно (по умолчанию) | вернуть интерактивность после отключения |
none |
клики/наведение игнорируются, проходят насквозь | заблокировать элемент или слой |
Вкладки: где применять
.btn[disabled],
.btn.is-disabled {
pointer-events: none;
opacity: .5;
cursor: not-allowed;
}Самый частый кейс: кнопка «на паузе». Она теряет кликабельность и выглядит неактивной. Важно: pointer-events: none убирает и подсказку курсора, поэтому cursor может выглядеть не так, как ожидается.
.backdrop {
position: fixed; inset: 0;
background: rgba(0,0,0,.4);
pointer-events: none; /* клики проходят сквозь подложку */
}Полупрозрачная подложка, которая является только фоном и не мешает кликам по элементам под ней. Если нужно, наоборот, ловить клик по подложке, оставьте auto.
.coming-soon a {
pointer-events: none;
color: #999;
}Ссылка на «скоро»: выглядит как ссылка, но не ведёт никуда. Это «мягкий» способ вместо удаления href.
.card::before {
content: "";
position: absolute; inset: 0;
pointer-events: none; /* декор не перехватывает клики */
}Декоративные градиенты, блики, водяные знаки, наложенные поверх карточки, не должны мешать клику по самой карточке.
disabled, а pointer-events — для визуально-интерактивных эффектов.Не только для указателя
У pointer-events есть дополнительное значение для SVG — visiblePainted и другие. Оно определяет, какие именно части фигуры «ловят» клик (заливка, контур, всё). В обычном HTML это не нужно, но в SVG-иконках иногда встречается.
svg .hole { pointer-events: none; } /* дырка не перехватывает клик */Наследование и «вернуть обратно»
Свойство наследуется: если родителю задать none, дети тоже перестанут реагировать. Чтобы вернуть отдельному элементу интерактивность, задайте ему auto:
.layer { pointer-events: none; }
.layer .active-item { pointer-events: auto; }Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Кнопка не кликается | осталась pointer-events: none |
вернуть auto |
| Клики не доходят до ссылок | прозрачный слой перехватывает | слою задать none |
| Курсор не меняется | none отключает и hover |
использовать disabled/is-disabled |
| Весь блок стал «мёртвым» | свойство унаследовано от родителя | вернуть auto нужным элементам |
Проверьте себя
pointer-events: none?
pointer-events: none отличается от атрибута disabled?
Вопросы и ответы
Да, оно наследуется. Если родителю поставить none, дети тоже перестанут реагировать, пока им не вернуть auto.
Нет. Свойство лишь отключает события указателя — код можно вызвать иначе, а клавиатурная навигация по ссылкам может остаться. Это не защита, а UI-приём.
Проверьте, не переопределяет ли свойство другое правило, и не лежит ли поверх элемент с auto. И ещё: pointer-events действует и на касания, но конфликтующие скрипты могут ловить тап сами.
Подложке оставьте pointer-events: auto и повесьте обработчик клика. А декоративные слои внутри — none, чтобы не мешали.
Итоги
pointer-eventsуправляет реакцией на мышь и касания, а не видимостью.noneпропускает клики сквозь элемент.- Для форм правильнее
disabled, для декора —none. - Свойство наследуется — вернуть интерактивность можно через
auto.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.