Свойство pointer-events помогает определить поведение элемента в момент наведения на него или клика, а точнее - игнорировать его.

На практике это означает, что мы можем просто отключить клик или событие наведения для любого конкретного элемента DOM с помощью стилей CSS. Кроме применения этого свойства к обычным HTML-тегам, многие из значений pointer-events относятся к элементам SVG. Описания всех возможных значений свойства предоставлены ниже, однако акцент статьи сделаем все же на DOM-элементах.

Синтаксис правила выглядит следующим образом:

.element {
  pointer-events: none;
}

Возможные значения свойства:

  • auto - значение по умолчанию; элемент реагирует на события указателя (наведение, клик) в стандартном режиме.
  • none - элемент не реагирует на события указателя.
  • visiblePainted - только для SVG; реагирует на события указателя при условии, что указано свойство visibility: visible и курсор находится над областью заливки или обводки (значения fill и stroke при этом не могут быть равны none).
  • visibleFill - только для SVG; реагирует на события указателя при условии, что указано свойство visibility: visible и курсор находится над областью заливки.
  • visibleStroke - только для SVG; реагирует на события указателя при условии, что указано свойство visibility: visible и курсор находится над областью обводки.
  • visible - только для SVG;  реагирует на события указателя при условии, что указано свойство visibility: visible.
  • painted - только для SVG; реагирует на события указателя когда курсор находится над областью заливки или обводки (значения fill и stroke при этом не могут быть равны none).
  • fill - только для SVG; реагирует на события указателя когда курсор находится над областью заливки.
  • stroke - только для SVG; реагирует на события указателя когда курсор находится над областью обводки.
  • all - только для SVG; реагирует на события указателя когда курсор находится над областью заливки или обводки.

Применение свойства pointer-events

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

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