Указатель-события - CSS-хитрости

pointer-eventsСвойство позволяет управлять над тем, как HTML элементы реагируют на мышь / сенсорные события - в том числе CSS парения / активных состояний, нажмите / TAP событий в JavaScript, и будет ли курсор виден.

.avoid-clicks ( pointer-events: none; )

Хотя pointer-eventsсвойство принимает одиннадцать возможных значений, все, кроме трех, зарезервированы для использования с SVG. Три допустимые значения для любого элемента HTMl:

none предотвращает все параметры щелчка, состояния и курсора в указанном элементе HTML
autoвосстанавливает функциональность по умолчанию (полезно для использования с дочерними элементами элемента с pointer-events: none;указанным
inheritбудет использовать pointer-eventsзначение родительского элемента

Посмотрите на эту ручку!

Как показано выше, основной вариант использования pointer-events- позволить поведению щелчка или касания «пройти через» элемент к другому элементу под ним по оси Z. Например, это может быть полезно для графических наложений или скрытия элементов с помощью opacity(например, всплывающих подсказок) и по-прежнему позволяет выделять текст для содержимого под ним.

Точки интереса

«Использование событий-указателей в CSS для элементов, не относящихся к SVG, является экспериментальным. Раньше эта функция была частью черновой спецификации пользовательского интерфейса CSS3, но из-за множества открытых проблем была перенесена на CSS4 ». - Mozilla MDN
«Если вы добавляете прослушиватель событий щелчка к элементу, а затем удаляете стиль событий указателя (или меняете его значение на auto, событие щелчка запускает указанную функцию. В основном, событие щелчка учитывает значение событий указателя». Дэвид Уолш

Поддержка браузера

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.