pointer-events

В процессе перевода.

Описание

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

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

Начальное значениеauto
Применяется квсе элементы
Наследуетсяда
Отображениевизуальный
Обработка значениякак указано
Animation typediscrete
Канонический порядокуникальный неоднозначный порядок, определённый формальной грамматикой

Синтаксис

/* Значения ключевых слов */
pointer-events: auto;
pointer-events: none;
pointer-events: visiblePainted; /* только SVG */
pointer-events: visibleFill;    /* только SVG */
pointer-events: visibleStroke;  /* только SVG */
pointer-events: visible;        /* только SVG */
pointer-events: painted;        /* только SVG */
pointer-events: fill;           /* только SVG */
pointer-events: stroke;         /* только SVG */
pointer-events: all;            /* только SVG */

/* Глобальные значения */
pointer-events: inherit;
pointer-events: initial;
pointer-events: unset;

Значения

auto
Элемент ведёт себя так же, как и если бы свойство pointer-events не было задано. В SVG это значение даёт такой же эффект, как и значение visiblePainted.
none
Элемент не может быть целью (target) cобытий мыши; тем не менее, целью событий мыши могут быть его потомки, если их pointer-events имеет какое-либо другое значение. В этом случае события мыши вызовут ожидаемое срабатывание обработчиков на этом родительском элементе на пути к/от потомк(у)/(а) во время фазы захвата/всплытия.
visiblePainted
Только SVG. Элемент может быть целью события мыши только когда свойство visibility установлено в значение visible и когда курсор мыши находится над внутренней частью ('fill') элемента, при этом свойство fill установлено в значение отличное от none, или над периметром элемента ('stroke'), при этом свойство stroke установлено в значение отличное от none.
visibleFill
Только SVG. Элемент может быть целью события мыши только когда свойство visibility установлено в значение visible и когда курсор мыши находится над внутренней частью ('fill') элемента. Значение свойства fill не влияет на обработку события.
visibleStroke
Только SVG. Элемент может быть целью события мыши только когда свойство visibility установлено в значение visible и когда курсор мыши находится над периметром элемента ('stroke'). Значение свойства stroke не влияет на обработку события.
visible
Только SVG. Элемент может быть целью события мыши только когда свойство visibility установлено в значение visible и когда курсор мыши находится над внутренней частью ('fill') или над периметром ('stroke') элемента. Значение свойств fill и stroke не влияют на обработку события.
painted
Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над внутренней частью ('fill') элемента, при этом свойство fill установлено в значение отличное от none, или над периметром элемента ('stroke'), при этом свойство stroke установлено в значение отличное от none. Значение свойства visibility не влияет на обработку события.
fill
Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над внутренней частью ('fill') элемента. Значение свойств visibility и fill не влияют на обработку события.
stroke
Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над периметром элемента ('stroke'). Значение свойств visibility и stroke не влияют на обработку события.
all
Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над внутренней частью ('fill') или над периметром ('stroke') элемента. Значение свойств visibilityfill и stroke не влияют на обработку события.

Formal syntax

auto | none | visiblePainted | visibleFill | visibleStroke | visible | painted | fill | stroke | all | inherit

Examples

Example 1

/* Example 1: Makes all the img non-reactive to any mouse events such as dragging, hovering, clicking etc */
img {
  pointer-events: none;
}

Example 2

Makes the link to http://example.com non-reactive.

<ul>
  <li><a href="https://developer.mozilla.org">MDN</a></li>
  <li><a href="http://example.com">example.com</a></li>
</ul>
a[href="http://example.com"] {
  pointer-events: none;
}

Notes

Note that preventing an element from being the target of mouse events by using pointer-events does not necessarily mean that mouse event listeners on that element cannot or will not be triggered. If one of the element's children has pointer-events explicitly set to allow that child to be the target of mouse events, then any events targeting that child will pass through the parent as the event travels along the parent chain, and trigger event listeners on the parent as appropriate. Of course any mouse activity at a point on the screen that is covered by the parent but not by the child will not be caught by either the child or the parent (it will go "through" the parent and target whatever is underneath).

We would like to provide finer grained control (than just auto and none) in HTML for which parts of an element will cause it to "catch" mouse events, and when. To help us in deciding how pointer-events should be further extended for HTML, if you have any particular things that you would like to be able to do with this property, then please add them to the Use Cases section of this wiki page (don't worry about keeping it tidy).

Specifications

Specification Status Comment
Scalable Vector Graphics (SVG) 1.1 (Second Edition)
Определение 'pointer-events' в этой спецификации.
Рекомендация  

Its extension to HTML elements, though present in early drafts of CSS Basic User Interface Module Level 3, has been pushed to its level 4.

Browser compatibility

Feature Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
SVG support 1.0 (Да) 1.5 (1.8) 11.0 9.0 (2.0) 3.0 (522)
HTML/XML content 2.0 (Да) 3.6 (1.9.2) 11.0 15.0 4.0 (530)
Feature Android Edge Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support 2.1 (Да) 3.6 11 33 3.2

See also

Метки документа и участники

 Внесли вклад в эту страницу: Isk1n, kav137, valeriya-z
 Обновлялась последний раз: Isk1n,