Практическое применение CSS свойства pointer-events

Опубликовано: Пятница, Февраль 14, 2014 Комментарии (5)

Что такое pointer-events

CSS свойство pointer-events было опубликовано в CSS4-UI в качестве дополнения к CSS3 свойствам.
W3C.org заявляет в спецификации:

The pointer-events property allows authors to control whether or when an element may be the target of user pointing device (pointer, e.g. mouse) events. This property is used to specify under which circumstance (if any) a pointer event should go “through” an element and target whatever is “underneath” that element instead. This also applies to other “hit testing” behaviors such as dynamic pseudo-classes (:hover, :active, :focus), hyperlinks, and 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. Спасет ли это от незаконного копирования? Вряд ли…но жизнь воришке слегка подпортит.

See the Pen zKDev by Anastasiia Bakai (@positivecrash) on CodePen.


Правой картинке задано как раз свойство pointer-events. Попробуйте на практике покликать.

2. Ускорения скролла

Давненько уже было описано, что скролл – тяжелая процедура, при которой перерисовывается контент. Там же написано, что события для элемента такие, как hover, click и т.п. так же требуют перерисовки элементов, соответственно замедляют работу браузера. На хабре был предложен метод, который позволяет уменьшить подобную нагрузку на браузер как раз с помощью свойства pointer-event! Описывать тут метод не буду, в статье все хорошо описано. Способ, надо сказать, заманчивый. И возможно даже не будет никаких казусов в связи с особенностью обработки JavaScript, описанной мною выше.

3. Дизайн-элементы поверх интерактивных карт

Нарисовала я как-то дизайн, в котором ключевым элементом была карта. Сделала скриншот Google карты и наложила на нее пару теней для украшения:

design_google_map

Она понравилась моему начальнику и всё бы ничего..но вот в Illustrator я наложила на карту тени, а в вёрстке как быть? Тут на помощь как раз придёт CSS свойство pointer-events, который позволит наложить декоративные элементы поверх карты, при этом не “закрывая” области интерактивной карты от взаимодействия с пользователем.  Как вы уже догадались, я просто добавлю строчку

в CSS к элементам теней. Как быть с IE, который не поддерживает это свойство до 11 версии? В данном случае я просто не стану для пользователей IE показывать эти тени.

4. Другие забавные примеры pointer-event

Пример 4.1: png изображение поверх текста

Пример 4.2: png изображение поверх галереи, презабавнейший эффект

Пример 4.3: очень сложный красивый пример

Поделитесь с друзьями:

Читайте также:

Комментируйте:

  • Dmitri

    Спасибо! хорошая статья

    • http://positivecrash.com/ Настя Бакай

      очень приятно, что она вам пригодилась! подписывайтесь на рассылку, постараюсь побольше писать)

  • Pingback: CSS | Pearltrees()

  • http://site-html.ru kovani

    Чувак ты крутяк =) Пример 4.2:

    • Илья

      Что крутяк согласен. Вот только это не чувак надо полагать.)