initial commit

1 files changed, 189 insertions, 0 deletions

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
+---
+<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>) cобытий мыши; тем не менее, целью событий мыши могут быть его потомки, если их <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>
+
+<pre class="syntaxbox">{{csssyntax}}</pre>
+
+<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">&lt;ul&gt;
+  &lt;li&gt;&lt;a href="https://developer.mozilla.org"&gt;MDN&lt;/a&gt;&lt;/li&gt;
+  &lt;li&gt;&lt;a href="http://example.com"&gt;example.com&lt;/a&gt;&lt;/li&gt;
+&lt;/ul&gt;</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>