pointer-events

/* Keyword values */
pointer-events: auto;
pointer-events: none;

/* Values used in SVGs */
pointer-events: visiblePainted;
pointer-events: visibleFill;
pointer-events: visibleStroke;
pointer-events: visible;
pointer-events: painted;
pointer-events: fill;
pointer-events: stroke;
pointer-events: bounding-box;
pointer-events: all;

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: revert;
pointer-events: revert-layer;
pointer-events: unset;

Свойство pointer-events задаётся одним ключевым словом из списка ниже.

auto

Элемент ведёт себя так же, как если бы свойство pointer-events не было задано. В SVG-контенте это значение и значение visiblePainted имеют одинаковый эффект.

none

Элемент сам по себе никогда не является мишенью для событий указателя. Однако его поддерево может оставаться доступным для обработки событий, если задать pointer-events какое-либо другое значение. В этих случаях события указателя будут вызывать обработчики событий на этом родительском элементе, соответствующим образом, в фазах захвата и возвращения события.

Примечание: События pointerenter и pointerleave срабатывают при перемещении указательного устройства в элемент или в один из его потомков. Таким образом, даже если pointer-events: none установлено на родителе, а не на потомках, события срабатывают на родителе после того, как указатель переместился внутрь или наружу потомка.

Только для SVG (экспериментально для HTML)

visiblePainted

Только для SVG (экспериментально для HTML). Элемент может быть только мишенью события указателя, когда свойство visibility установлено в visible, например, когда курсор мыши находится внутри (т. е., 'заливка') элемента, и свойство fill установлено в значение, отличное от none, или когда курсор мыши находится на периметре (т. е., 'контур') элемента, и свойство stroke установлено в значение, отличное от none.

visibleFill

Только для SVG. Элемент может быть только мишенью события указателя, когда свойство visibility установлено в visible, и, например, когда курсор мыши находится внутри (т. е., в заливке) элемента. Значение свойства fill не влияет на обработку событий.

visibleStroke

Только для SVG. Элемент может быть только мишенью события указателя, когда свойство visibility установлено в visible, и, например, когда курсор мыши находится на периметре (т. е., контуре) элемента. Значение свойства stroke не влияет на обработку событий.

visible

Только для SVG (экспериментально для HTML). Элемент может быть мишенью события указателя, когда свойство visibility установлено в visible, и, например, курсор мыши находится как внутри (т. е., 'заливка'), так и на периметре (т. е., 'контур') элемента. Значения fill и stroke не влияют на обработку событий.

painted

Только для SVG (экспериментально для HTML). Элемент может быть только мишенью события указателя, когда, например, курсор мыши находится внутри (т. е., 'заливка') элемента, и свойство fill установлено в значение, отличное от none, или когда курсор мыши находится на периметре (т. е., 'контур') элемента, и свойство stroke установлено в значение, отличное от none. Значение свойства visibility не влияет на обработку событий.

fill

Только для SVG. Элемент может быть только мишенью события указателя, когда указатель находится внутри (т. е., 'заливка') элемента. Значения свойств fill и visibility не влияют на обработку событий.

stroke

Только для SVG. Элемент может быть только мишенью события указателя, когда указатель находится на периметре (т. е., 'контур') элемента. Значения свойств stroke и visibility не влияют на обработку событий.

bounding-box

Только для SVG. Элемент может быть только мишенью события указателя, когда указатель находится внутри объёмной рамки элемента.

all

Только для SVG (экспериментально для HTML). Элемент может быть только мишенью события указателя, когда указатель находится внутри (т. е., 'заливка') или на периметре (т. е., 'контур') элемента. Значения fill, stroke, и visibility не влияют на обработку событий.

Если это свойство не указано, те же характеристики, что и для значения visiblePainted применимы к SVG-контенту.

В дополнение к указанию того, что элемент не является мишенью для событий указателя, значение none указывает событию указателя "пройти" через элемент и стать мишенью для того, что находится "под" этим элементом.

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

Элементы с pointer-events: none по-прежнему будут получать фокус при последовательной навигации по клавиатуре с помощью клавиши Tab.

pointer-events = 
  auto            |
  bounding-box    |
  visiblePainted  |
  visibleFill     |
  visibleStroke   |
  visible         |
  painted         |
  fill            |
  stroke          |
  all             |
  none            

В этом примере отключаются события указателя (щелчки, перетаскивание, наведение курсора и т. д.) для всех изображений.

img {
  pointer-events: none;
}

В этом примере отключаются события указателя для ссылки на http://example.com.

HTML

<ul>
  <li><a href="https://developer.mozilla.org">MDN</a></li>
  <li><a href="http://example.com">example.com</a></li>
</ul>

CSS

a[href="http://example.com"]
{
  pointer-events: none;
}

Результат

• Атрибут SVG pointer-events
• Атрибут SVG visibility
• API PointerEvent
• Спецификация WebKit PointerEventsProperty расширенная для использования в (X)HTML-контенте
• user-select - управляет возможностью пользователя выделять текст