CSS-свойство `pointer-events`

Свойство pointer-events CSS задаёт условия, при которых графический элемент может стать целью событий указателя.

Попробуйте

pointer-events: auto;

pointer-events: none;

pointer-events: stroke; /* SVG-only */

pointer-events: fill; /* SVG-only */

<section class="flex-column" id="default-example">
  <div id="example-element">
    <p>
      <a href="#">example link</a>
    </p>
    <p>
      <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
        <a xlink:href="#">
          <circle
            cx="50"
            cy="50"
            fill="#3E6E84"
            r="40"
            stroke="#ffb500"
            stroke-width="5"></circle>
          <text fill="white" text-anchor="middle" x="50" y="55">SVG</text>
        </a>
      </svg>
    </p>
  </div>
</section>

#example-element {
  font-weight: bold;
}

#example-element a {
  color: #009e5f;
}

#example-element svg {
  width: 10em;
  height: 10em;
}

Синтаксис

/* Keyword values */
pointer-events: auto;
pointer-events: none;

/* Values used in SVGs */
pointer-events: visiblePainted;
pointer-events: visibleFill;
pointer-events: visibleStroke;
pointer-events: visible;
pointer-events: painted;
pointer-events: fill;
pointer-events: stroke;
pointer-events: bounding-box;
pointer-events: all;

/* Global values */
pointer-events: inherit;
pointer-events: initial;
pointer-events: revert;
pointer-events: revert-layer;
pointer-events: unset;

Свойство pointer-events задаётся одним ключевым словом из приведённого ниже списка значений.

Значения

auto

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

none

Элемент, как правило, не является целью событий указателя, за исключением событий pointerenter и pointerleave, отправленных самому элементу или его потомкам. Обратите внимание: события указателя, целью которых являются потомки (у которых pointer-events не задано как none), всё равно вызовут срабатывание обработчиков событий на этом родительском элементе на этапах перехвата и всплытия события.

Примечание: События pointerenter и pointerleave отправляются, когда указательное устройство перемещается на элемент или один из его потомков. Поэтому, даже если для родительского элемента задано pointer-events: none, а для дочерних элементов оно не задано, события будут запускаться на родительском элементе после перемещения указателя внутрь или наружу потомка.

Только SVG (экспериментально для HTML)

visiblePainted

Только SVG (экспериментально для HTML). Элемент может быть целью события указателя, только если свойству visibility задано значение visible и, например, курсор мыши находится над внутренней областью (то есть «заливкой») элемента, а свойству fill задано значение, отличное от none, либо если курсор мыши находится над периметром (то есть «обводкой») элемента, а свойству stroke задано значение, отличное от none.

visibleFill

Только SVG. Элемент может быть целью события указателя, только если свойству visibility задано значение visible и, например, курсор мыши находится над внутренней областью (то есть заливкой) элемента. Значение свойства fill не влияет на обработку событий.

visibleStroke

Только SVG. Элемент может быть целью события указателя, только если свойству visibility задано значение visible и, например, курсор мыши находится над периметром (то есть обводкой) элемента. Значение свойства stroke не влияет на обработку событий.

visible

Только SVG (экспериментально для HTML). Элемент может быть целью события указателя, если свойству visibility задано значение visible и, например, курсор мыши находится над внутренней областью (то есть заливкой) или периметром (то есть обводкой) элемента. Значения свойств fill и stroke не влияют на обработку событий.

painted

Только SVG (экспериментально для HTML). Элемент может быть целью события указателя, только если, например, курсор мыши находится над внутренней областью (то есть «заливкой») элемента, а свойству fill задано значение, отличное от none, либо если курсор мыши находится над периметром (то есть «обводкой») элемента, а свойству stroke задано значение, отличное от none. Значение свойства visibility не влияет на обработку событий.

fill

Только SVG. Элемент может быть целью события указателя, только когда указатель находится над внутренней областью (то есть заливкой) элемента. Значения свойств fill и visibility не влияют на обработку событий.

stroke

Только SVG. Элемент может быть целью события указателя, только когда указатель находится над периметром (то есть обводкой) элемента. Значения свойств stroke и visibility не влияют на обработку событий.

bounding-box

Только SVG. Элемент может быть целью события указателя, только когда указатель находится над ограничивающей рамкой элемента.

all

Только SVG (экспериментально для HTML). Элемент может быть целью события указателя, только когда указатель находится над внутренней областью (то есть заливкой) или периметром (то есть обводкой) элемента. Значения свойств fill, stroke и visibility не влияют на обработку событий.

Описание

Если это свойство не задано, для содержимого SVG применяются те же характеристики, что и для значения visiblePainted.

Помимо указания на то, что элемент не является целью событий указателя, значение none предписывает событию указателя пройти «сквозь» элемент и нацелиться на то, что находится «под» ним.

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

Элементы со значением pointer-events: none по-прежнему получают фокус при последовательной навигации с помощью клавиши Tab.

Формальное определение

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

pointer-events = 
  auto |
  none |
  visiblePainted |
  visibleFill |
  visibleStroke |
  visible |
  painted |
  fill |
  stroke |
  all |
  inherit

Примеры

Отключение событий указателя для всех изображений

В этом примере события указателя (нажатие, перетаскивание, наведение и т. д.) отключаются для всех изображений.

img {
  pointer-events: none;
}

Отключение событий указателя для одной ссылки

В этом примере события указателя отключаются для ссылки на http://example.com.

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

Результат

Спецификации

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

См. также

• user-select
• Атрибут SVG pointer-events
• Атрибут SVG visibility
• PointerEvent