From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/css/pointer-events/index.html | 189 +++++++++++++++++++++++++++++ 1 file changed, 189 insertions(+) create mode 100644 files/ru/web/css/pointer-events/index.html (limited to 'files/ru/web/css/pointer-events') diff --git a/files/ru/web/css/pointer-events/index.html b/files/ru/web/css/pointer-events/index.html new file mode 100644 index 0000000000..99f9b27a87 --- /dev/null +++ b/files/ru/web/css/pointer-events/index.html @@ -0,0 +1,189 @@ +--- +title: pointer-events +slug: Web/CSS/pointer-events +tags: + - CSS свойства + - Ссылка +translation_of: Web/CSS/pointer-events +--- +
{{CSSRef}}
+ +

Описание

+ +

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

+ +

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

+ +

{{cssinfo}}

+ +

Синтаксис

+ +
/* Значения ключевых слов */
+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') элемента. Значение свойств visibility, fill и stroke не влияют на обработку события.
+
+ +

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

+ +
{{csssyntax}}
+ +

Примеры

+ +

Пример 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;
+}
+ +
{{EmbedLiveSample('Example_2', "500", "100")}}
+ +

Примечание

+ +

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

+ +

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

+ +

Характеристики

+ + + + + + + + + + + + + + + + +
СпецификацияСтатусКоммент
{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}{{Spec2('SVG1.1')}} 
+ +

Это расширение для элементов HTML, хоть и присутствует в ранних версиях CSS Basic User Module Interface Level 3, было перенесено на level 4.

+ +

Совместимость браузера

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
SVG support1.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.8")}}11.09.0 (2.0)3.0 (522)
HTML/XML content2.0{{CompatVersionUnknown}}{{CompatGeckoDesktop("1.9.2")}}11.015.04.0 (530)
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE PhoneOpera MobileSafari Mobile
Basic support2.1{{CompatVersionUnknown}}3.611333.2
+
+ +

Смотрите также

+ + -- cgit v1.2.3-54-g00ecf