Перевод не завершен. Пожалуйста, помогите перевести эту статью с английского.

Описание

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 не влияют на обработку события.

Формальный синтаксис

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

Примеры

Пример 1

/* Пример 1: Сделать так, что бы все объекты img не реагировали на перетаскивание, наведение(:hover), нажатие(click) и т.д. */
img {
  pointer-events: none;
}

Пример 2

Сделать ссылку на ресурс http://example.com не реагирующей на нажатие(click), наведение(:hover) и т.д.

<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;
}

Примечание

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

Мы хотели бы предоставить более тонкий контроль (а не только auto и none) в HTML, когда части элемента смогут «поймать» события мыши. Если у вас есть какие-то конкретные вещи, чтобы помочь нам в решении как следует расширить pointer-events для HTML, и которые вы хотели бы сделать с этим свойством, добавьте их в раздел «Использовать случаи» на этой странице вики (не беспокойтесь, мы всё сохраним аккуратно). 

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

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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

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

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