«pointer-events» — это свойство CSS, которое определяет, как элемент реагирует на действия пользователя с помощью указателя (например, мыши или сенсорного экрана).
Значения свойства «pointer-events» могут быть:
- auto: элемент обрабатывает указатели по умолчанию;
- none: элемент не обрабатывает указатели и игнорирует все события указателей;
- visiblePainted: элемент обрабатывает указатели только на видимых частях элемента, а не на частях, которые находятся за пределами его высоты и ширины;
- visibleFill: элемент обрабатывает указатели только на видимых областях его заливки, а не на частях, которые находятся за пределами заливки;
- visibleStroke: элемент обрабатывает указатели только на видимых областях его границы, а не на частях, которые находятся за ее пределами;
- painted: элемент обрабатывает указатели на областях, уже нарисованных на элементе;
- fill: элемент обрабатывает указатели только на областях его заливки;
- stroke: элемент обрабатывает указатели только на областях его границ.
Например, если задать свойство «pointer-events: none» для элемента <div>, то он не будет реагировать на клики мышью или нажатия на сенсорном экране.
Свойство «pointer-events» может быть полезным в случаях, когда нужно наложить несколько элементов друг на друга, но реагировать только на события указателей определенного элемента. Например, чтобы создать кнопки с прозрачным фоном, можно наложить элементы кнопки на фотографию и задать свойство «pointer-events: none» для фотографии, чтобы кнопка реагировала только на события указателей, но не заблокировала бы клик на фотографии.
