Каждый клик, тап или наведение на сайте начинается с того, что браузер определяет, к какому элементу прикоснулся пользователь. Этот процесс — официально называемый hit-тестированием — решает, какой элемент станет целью события указателя. Свойство CSS pointer-events позволяет управлять этим поведением.

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

Как браузер выбирает цель

Обычно браузер выбирает самый верхний элемент под указателем. Если у этого элемента стоит pointer-events: none, браузер игнорирует его и опускается на следующий слой. Именно поэтому наложения и модальные окна часто используют этот прием — чтобы пользователь мог взаимодействовать с фоновыми элементами позади наложения.

Значения, которые вы действительно будете использовать

Для большинства HTML-задач вам понадобятся всего два значения:

  • auto (по умолчанию) — обычное поведение, элемент получает события указателя
  • none — элемент пропускается при hit-тестировании

Элементы SVG предлагают дополнительный тонкий контроль. Девять дополнительных значений позволяют указать, будет ли графика реагировать на события указателя в зависимости от заливки, обводки, видимости или ограничивающей рамки. Например, visibleFill делает элемент SVG кликабельным только тогда, когда указатель находится над закрашенной областью, а bounding-box делает всю прямоугольную область вокруг фигуры кликабельной, независимо от того, где нарисована сама графика.

Дочерние элементы могут вернуть себе возможность взаимодействия

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

.parent { pointer-events: none; }
.child { pointer-events: auto; }

Этот шаблон особенно полезен для модальных окон. Вы создаете контейнер-наложение на всю страницу, который по умолчанию блокирует клики, а затем снова включаете события указателя только на содержимое модального окна. Результат: пользователи могут взаимодействовать с модальным окном и одновременно нажимать на кнопки, видимые под наложением.

Распространение событий сохраняется

Это свойство влияет только на выбор цели, а не на поток событий. Если на дочерний элемент с pointer-events: auto кликнули внутри родителя с pointer-events: none, event.target будет дочерним элементом. Но событие все равно всплывает до родителя, поэтому любые обработчики событий, привязанные к родителю, сработают как обычно.

Например, слушатель события click на родителе все равно выполняется. Единственное отличие в том, что event.target сообщает о дочернем элементе, а не о родителе. Это поведение одинаково для событий pointerenter и pointerleave.

Практические примеры для бизнеса на Кипре и в ЕС

При создании многоязычных сайтов (EN/RU/EL) или сложных веб-приложений с CRM- или ERP-панелями вы столкнетесь со следующими сценариями:

  • Наложения и всплывающие окна: Сохраняйте фон интерактивным при показе модального окна — избегайте разочарования пользователей на мобильных устройствах
  • Пользовательские меню и выпадающие списки: Предотвращайте случайные клики по скрытым элементам подменю при наведении
  • Состояния загрузки: Временно блокируйте взаимодействие с разделом, пока загружаются данные, не удаляя элементы из DOM
  • SVG-карты или диаграммы: В интерактивной инфографике делайте кликабельными только определенные области, используя специфичные для SVG значения, например visibleFill
  • Соответствие GDPR: Перенаправляйте все клики на баннер согласия без переписывания всей логики обработки кликов

Распространенная ошибка: разработчики пытаются использовать pointer-events для отключения кнопок форм. Визуально это работает, но помните — это свойство предотвращает только события указателя. Пользователи клавиатуры все еще могут активировать кнопку. Для настоящего отключенного состояния используйте атрибут disabled.

Реализация проста. Никаких JavaScript-библиотек, никакой сложной делегации событий. Просто одно CSS-объявление, которое меняет способ определения браузером элемента под пальцем или курсором пользователя. Результат — более чистый код и более предсказуемая модель взаимодействия для вашего сайта или веб-приложения.