Свойство pointer-events позволяет авторам контролировать, может ли элемент быть целью событий указывающего устройства пользователя (указатель, например, мышь) или нет. Это свойство используется для указания того, при каких обстоятельствах (если таковые имеются) событие указателя должно проходить «сквозь» элемент и нацеливаться на то, что находится «под» этим элементом. Это также применимо к другим поведениям «проверки попадания», таким как динамические псевдоклассы (:hover, :active, :focus), гиперссылки и Document.elementFromPoint().
Таким образом pointer-events – это свойство, позволяющее контролировать когда, как и может ли вообще указатель устройства (чаще всего мышь) взаимодействовать с элементом.
pointer-events: none предотвращает события указателя (как правило, мыши) для элемента: hover, active, click и т.п., в том числе и JavaScript событие click.
pointer-events: auto восстанавливает стандартное взаимодействие указателя с элементом.
Есть и другие значения свойства pointer-events, но они используются только при работе с SVG и я их не буду здесь рассматривать.
Небольшая особенность pointer-events, которую обязательно нужно учитывать
Предположим, вы установили для элемента JavaScript отслеживание события click. Затем выставили для него свойство pointer-events: none, а после этого опять поменяли этому элементу значение свойства pointer-eventsна auto. Тогда JavaScript, вызываемый при событии onclick, будет вызван опять при изменении значения свойства pointer-events на auto.
Кроссбраузерность pointer-events
Pointer-events, на удивление, поддерживается многими версиями браузеров. Но всё же подобные свойства нужно использовать аккуратно, чтобы не лишать пользователей возможности пользоваться основными функциями web приложения в старых версиях браузеров.
Так как же использовать pointer-events без вреда для кроссбраузерности? Можно воспользоваться Modernizr библиотекой для определения поддержки браузера этого свойства. А можно принять во внимание, что по сути подобная проблема возникнет в старой версии IE (так как другие браузеры обычно автоматически обновляются) и воспользоваться условными комментариями, если это возможно (пример 3).
Применение CSS свойства pointer-events на практике
Применений pointer-events в верстке можно найти в принципе столько, насколько у верстальщика хватит фантазии и потребностей. Есть парочка применений, которые и мне кажутся полезными. Напишу о них подробнее.
1. Предотвращение взаимодействия с изображениями
Если, к примеру, вы не хотите, чтобы у пользователя была возможность кликнуть правой кнопкой мыши по размещенному на сайте фото, то вы можете воспользоваться свойством pointer-event. Спасет ли это от незаконного копирования? Вряд ли…но жизнь воришке слегка подпортит.
Правой картинке задано как раз свойство pointer-events. Попробуйте на практике покликать.
2. Ускорения скролла
Давненько уже было описано, что скролл – тяжелая процедура, при которой перерисовывается контент. Там же написано, что события для элемента такие, как hover, click и т.п. так же требуют перерисовки элементов, соответственно замедляют работу браузера.
3. Дизайн-элементы поверх интерактивных карт
Нарисовала я как-то дизайн, в котором ключевым элементом была карта. Сделала скриншот Google карты и наложила на нее пару теней для украшения:
Она понравилась моему начальнику и всё бы ничего..но вот в Illustrator я наложила на карту тени, а в вёрстке как быть? Тут на помощь как раз придёт CSS свойство pointer-events, который позволит наложить декоративные элементы поверх карты, при этом не “закрывая” области интерактивной карты от взаимодействия с пользователем. Как вы уже догадались, я просто добавлю строчку
pointer-events: noneв CSS к элементам теней. Как быть с IE, который не поддерживает это свойство до 11 версии? В данном случае я просто не стану для пользователей IE показывать эти тени.