pointer-events
==============

Описание
--------

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

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

|  |  |
| --- | --- |
| Начальное значение | `auto` |
| Применяется к | все элементы |
| Наследуется | да |
| Обработка значения | как указано |
| Animation type | discrete |

Синтаксис
---------


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

### Значения

`auto`

Элемент ведёт себя так же, как и если бы свойство `pointer-events` не было задано. В SVG это значение даёт такой же эффект, как и значение `visiblePainted`.

`none`

Элемент не может быть целью (target) событий мыши; тем не менее, целью событий мыши могут быть его потомки, если их `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` не влияют на обработку события.

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

pointer-events =   
  auto            | (en-US)  
  bounding-box    | (en-US)  
  visiblePainted  | (en-US)  
  visibleFill     | (en-US)  
  visibleStroke   | (en-US)  
  visible         | (en-US)  
  painted         | (en-US)  
  fill            | (en-US)  
  stroke          | (en-US)  
  all             | (en-US)  
  none              
  
```

Примеры
-------

### Пример 1


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

### Пример 2

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


```html
<ul>
  <li><a href="https://developer.mozilla.org">MDN</a></li>
  <li><a href="http://example.com">example.com</a></li>
</ul>
```



```css
a[href="http://example.com"]
{
  pointer-events: none;
}
```

Примечание
----------

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

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

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

| Specification |
| --- |
| CSS Basic User Interface Module Level 4 # pointer-events-control |
| Scalable Vector Graphics (SVG) 2 # PointerEventsProperty |

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

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

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

* Атрибут SVG `pointer-events (en-US)`
* Атрибут SVG `visibility (en-US)`
* WebKit Specs PointerEventsProperty extended for use in (X)HTML content
* 60fps scrolling using pointer-events: none