pointer-events

Свойство pointer-events определяет, как HTML-элемент реагирует на различные события мыши, прикосновений или события из JavaScript.

Время чтения: меньше 5 мин

Кратко

Секция статьи "Кратко"

Свойство pointer-events управляет тем, как элемент будет реагировать на указатель (pointer): наведение или клик курсора мыши, тап на сенсорном экране, соответствующие события из JavaScript.

Пример

Секция статьи "Пример"

Кнопка не будет реагировать на нажатие указателем:

        
          
          button {  pointer-events: none;}
          button {
  pointer-events: none;
}

        
        
          
        
      

Но если на ней сфокусироваться с клавиатуры и нажать пробел, то она нажмётся.

Как пишется

Секция статьи "Как пишется"
  • none — запрещает элементу реагировать на указатель.
  • auto — элемент реагирует на указатель (значение по умолчанию).

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

Открыть демо в новой вкладке

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