pointer-events: участие в выборе цели указателя
pointer-events:none исключает элемент из обычного выбора цели событий указателя, что полезно для декоративных перекрывающих слоёв.
Назначение
pointer-events:none исключает элемент из обычного выбора цели событий указателя, что полезно для декоративных перекрывающих слоёв.
Как это работает
Указатель может попасть в элемент под прозрачным для событий слоем. Свойство не является общим выключателем компонента: фокусировка клавиатурой и поведение потомков требуют отдельного рассмотрения.
Пример
<style>
.box{position:relative;padding:20px}.overlay{position:absolute;inset:0;border:3px dashed #11694e;pointer-events:none}
</style>
<div class="box"><button type="button">Учебная кнопка</button><span class="overlay" aria-hidden="true"></span></div>Что должно получиться
Рамка перекрывает область визуально, но не перехватывает указатель. Кнопка не выполняет дополнительного действия: пример показывает только поведение выбора цели.
Граница применения и частая ошибка
Не используйте pointer-events:none как единственный способ отключить ссылку или кнопку. Действие может оставаться доступным с клавиатуры или через программный вызов.
Самостоятельная проверка
Снимите pointer-events:none с декоративного слоя и сравните нажатие на кнопку под ним. Затем проверьте клавишу Tab независимо от мыши.
HTML и CSS можно изменить в песочнице ниже. Она изолирована: JavaScript, внешние ресурсы и отправка форм отключены. Для проверки сетевых запросов, отправки данных или функций браузера используйте отдельную локальную страницу.