1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
---
title: pointer-events
slug: Web/CSS/pointer-events
tags:
- CSS-свойства
- Ссылка
translation_of: Web/CSS/pointer-events
---
<div>{{CSSRef}}</div>
<h2 id="Описание">Описание</h2>
<p>CSS-свойство<strong> <code>pointer-events</code></strong> позволяет контролировать события, при которых элемент может стать объектом события мыши. Если это свойство не задано, то к содержимому SVG будут применяться характеристики значения <code>visiblePainted.</code></p>
<p>Вдобавок к указанию того, что элемент не является объектом события мыши, значение <code>none</code> сообщает событию мыши проходить "через" элемент и обращаться к элементу, находящемуся "под" ним.</p>
<p>{{cssinfo}}</p>
<h2 id="Синтаксис">Синтаксис</h2>
<pre class="brush: css">/* Значения ключевых слов */
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;
</pre>
<h3 id="Значения">Значения</h3>
<dl>
<dt><code>auto</code></dt>
<dd>Элемент ведёт себя так же, как и если бы свойство <code>pointer-events</code> не было задано. В SVG это значение даёт такой же эффект, как и значение <code>visiblePainted</code>.</dd>
<dt><code>none</code></dt>
<dd>Элемент не может быть целью (<a href="/ru/docs/Web/API/event/target">target</a>) событий мыши; тем не менее, целью событий мыши могут быть его потомки, если их <code>pointer-events</code> имеет какое-либо другое значение. В этом случае события мыши вызовут ожидаемое срабатывание обработчиков на этом родительском элементе на пути к/от потомк(у)/(а) во время фазы захвата/<a href="/ru/docs/Web/API/event/bubbles">всплытия</a><code>.</code></dd>
<dt><code>visiblePainted</code></dt>
<dd>Только SVG. Элемент может быть целью события мыши только когда свойство <code>visibility</code> установлено в значение <code>visible</code> и когда курсор мыши находится над внутренней частью ('fill') элемента, при этом свойство <code>fill</code> установлено в значение отличное от <code>none</code>, или над периметром элемента ('stroke'), при этом свойство <code>stroke</code> установлено в значение отличное от <code>none</code>.</dd>
<dt><code>visibleFill</code></dt>
<dd>Только SVG. Элемент может быть целью события мыши только когда свойство <code>visibility</code> установлено в значение <code>visible</code> и когда курсор мыши находится над внутренней частью ('fill') элемента. Значение свойства <code>fill</code> не влияет на обработку события.</dd>
<dt><code>visibleStroke</code></dt>
<dd>Только SVG. Элемент может быть целью события мыши только когда свойство <code>visibility</code> установлено в значение <code>visible</code> и когда курсор мыши находится над периметром элемента ('stroke'). Значение свойства <code>stroke</code> не влияет на обработку события.</dd>
<dt><code>visible</code></dt>
<dd>Только SVG. Элемент может быть целью события мыши только когда свойство <code>visibility</code> установлено в значение <code>visible</code> и когда курсор мыши находится над внутренней частью ('fill') или над периметром ('stroke') элемента. Значение свойств <code>fill</code> и <code>stroke</code> не влияют на обработку события.</dd>
<dt><code>painted</code></dt>
<dd>Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над внутренней частью ('fill') элемента, при этом свойство <code>fill</code> установлено в значение отличное от <code>none</code>, или над периметром элемента ('stroke'), при этом свойство <code>stroke</code> установлено в значение отличное от <code>none</code>. Значение свойства <code>visibility</code> не влияет на обработку события.</dd>
<dt><code>fill</code></dt>
<dd>Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над внутренней частью ('fill') элемента. Значение свойств <code>visibility</code> и <code>fill</code> не влияют на обработку события.</dd>
<dt><code>stroke</code></dt>
<dd>Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над периметром элемента ('stroke'). Значение свойств <code>visibility</code> и <code>stroke</code> не влияют на обработку события.</dd>
<dt><code>all</code></dt>
<dd>Только SVG. Элемент может быть целью события мыши только когда курсор мыши находится над внутренней частью ('fill') или над периметром ('stroke') элемента. Значение свойств <code>visibility</code>, <code>fill</code> и <code>stroke</code> не влияют на обработку события.</dd>
</dl>
<h3 id="Формальный_синтаксис">Формальный синтаксис</h3>
{{csssyntax}}
<h2 id="Примеры">Примеры</h2>
<h3 id="Пример_1">Пример 1</h3>
<pre class="brush:css">/* Пример 1: Сделать так, что бы все объекты img не реагировали на перетаскивание, наведение(:hover), нажатие(click) и т.д. */
img {
pointer-events: none;
}</pre>
<h3 id="Example_2" name="Example_2">Пример 2</h3>
<p>Сделать ссылку на ресурс http://example.com не реагирующей на нажатие(click), наведение(:hover) и т.д.</p>
<pre class="brush:html"><ul>
<li><a href="https://developer.mozilla.org">MDN</a></li>
<li><a href="http://example.com">example.com</a></li>
</ul></pre>
<pre class="brush:css">a[href="http://example.com"] {
pointer-events: none;
}</pre>
<div>{{EmbedLiveSample('Example_2', "500", "100")}}</div>
<h2 id="Примечание">Примечание</h2>
<p>Обратите внимание, что предотвращение того, чтобы элемент был объектом событий мыши, с помощью <code>pointer-events</code> не обязательно означает, что обработчики событий мыши на этом элементе не могут или не будут запускаться. Если у одного из дочерних элементов есть явные <code>pointer-events,</code> позволяющие этому ребёнку быть объектом событий мыши, тогда любые события, нацеленные на этого дочернего элемента, будут проходить через родителя, когда событие перемещается вдоль родительской цепочки и запускает обработчики событий на родительском объекте. Конечно, любая активность мыши в точке на экране, которая покрывается родителем, но не дочерним, не будет поймана ни ребёнком, ни родителем (он пройдёт через «родительский» на «цели» под ним).</p>
<p>Мы хотели бы предоставить более тонкий контроль (а не только <code>auto</code> и <code>none</code>) в HTML, когда части элемента смогут «поймать» события мыши. Если у вас есть какие-то конкретные вещи, чтобы помочь нам в решении как следует расширить <code>pointer-events</code> для HTML, и которые вы хотели бы сделать с этим свойством, добавьте их в раздел «Использовать случаи» на <a class="link-https" href="https://wiki.mozilla.org/SVG:pointer-events">этой странице вики</a> (не беспокойтесь, мы всё сохраним аккуратно). </p>
<h2 id="Характеристики">Характеристики</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Спецификация</th>
<th scope="col">Статус</th>
<th scope="col">Коммент</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('SVG1.1', 'interact.html#PointerEventsProperty', 'pointer-events')}}</td>
<td>{{Spec2('SVG1.1')}}</td>
<td> </td>
</tr>
</tbody>
</table>
<p>Это расширение для элементов HTML, хоть и присутствует в ранних версиях CSS Basic User Module Interface Level 3, было перенесено на <a class="external" href="http://wiki.csswg.org/spec/css4-ui#pointer-events">level 4</a>.</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">Совместимость браузера</h2>
<p>{{Compat("css.properties.pointer-events")}}</p>
<h2 id="Смотрите_также">Смотрите также</h2>
<ul>
<li>Атрибут SVG {{SVGAttr("pointer-events")}}</li>
<li>Атрибут SVG {{SVGAttr("visibility")}}</li>
<li><a class="external" href="http://webkit.org/specs/PointerEventsProperty.html">WebKit Specs PointerEventsProperty</a> extended for use in (X)HTML content</li>
<li><a href="http://www.thecssninja.com/javascript/pointer-events-60fps">60fps scrolling using pointer-events: none</a></li>
</ul>
|
