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
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
|
---
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>{{CompatibilityTable}}</p>
<div id="compat-desktop">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Chrome</th>
<th>Edge</th>
<th>Firefox (Gecko)</th>
<th>Internet Explorer</th>
<th>Opera</th>
<th>Safari (WebKit)</th>
</tr>
<tr>
<td>SVG support</td>
<td>1.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("1.8")}}</td>
<td>11.0</td>
<td>9.0 (2.0)</td>
<td>3.0 (522)</td>
</tr>
<tr>
<td>HTML/XML content</td>
<td>2.0</td>
<td>{{CompatVersionUnknown}}</td>
<td>{{CompatGeckoDesktop("1.9.2")}}</td>
<td>11.0</td>
<td>15.0</td>
<td>4.0 (530)</td>
</tr>
</tbody>
</table>
</div>
<div id="compat-mobile">
<table class="compat-table">
<tbody>
<tr>
<th>Feature</th>
<th>Android</th>
<th>Edge</th>
<th>Firefox Mobile (Gecko)</th>
<th>IE Phone</th>
<th>Opera Mobile</th>
<th>Safari Mobile</th>
</tr>
<tr>
<td>Basic support</td>
<td>2.1</td>
<td>{{CompatVersionUnknown}}</td>
<td>3.6</td>
<td>11</td>
<td>33</td>
<td>3.2</td>
</tr>
</tbody>
</table>
</div>
<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>
|
