Для чего используется pointer-events: none?

Что такое pointer-events: none?

Свойство pointer-events в CSS управляет тем, как элемент реагирует на события указателя (мышь, тачпад, стилус). Значение none делает элемент "невидимым" для этих событий. Это означает, что клики, наведение, перетаскивание и другие действия, инициируемые указателем, будут проходить сквозь элемент и обрабатываться тем элементом, который находится под ним (согласно порядку наложения).

Как это работает?

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

Примеры использования

• Временное отключение кнопок: После отправки формы можно отключить кнопку, чтобы предотвратить повторную отправку.
• Оверлеи и модальные окна: Если у вас есть полупрозрачный оверлей, который не должен блокировать клики по элементам под ним, можно применить pointer-events: none к оверлею.
• Создание "кликабельных" областей: Например, можно сделать иконку поверх ссылки, но клик должен обрабатываться ссылкой, а не иконкой.

Пример кода

<style>
  .disabled-button {
    pointer-events: none;
    opacity: 0.5;
  }
  .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    pointer-events: none; /* Клики проходят сквозь оверлей */
  }
</style>

<button class="disabled-button">Отправлено</button>
<div class="overlay"></div>

Вывод

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