html.okpython.net
Основы создания сайтов
CSS :: Свойство pointer-events
css-свойство pointer-events (от англ. pointer events – события указателя) позволяет контролировать процесс реагирования элемента на события мыши или прикосновения к сенсорному экрану над ним (например, можно заблокировать переход при клике по ссылке или появление подсказки при наведении на элемент с атрибутом title).
Характеристики
- Значение по умолчанию: auto.
- Применяется: ко всем элементам.
- Наследуется: да.
- Анимируется: нет.
- JavaScript: object.style.pointerEvents="value".
Синтаксис
pointer-events: auto | none
Значения
- auto – элемент будет реагировать как обычно.
- none – события мыши над элементом будут игнорироваться.
Ссылки
Официальный сайт W3C: https://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty
Статья на Mozilla Firefox: https://developer.mozilla.org/ru/docs/Web/CSS/pointer-events
Примеры
HTML
Результат
htmlCodes
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Пример №1</title> <style> p{ width: 400px; height: 50px; padding: 2em; background-color: yellow; cursor: pointer; } /* Запрещаем события мыши над элементом */ .events_none{ background-color: violet; pointer-events: none; cursor: auto; } </style> </head> <body> <p onclick="event.currentTarget.innerHTML='Клик прошел!'"> Реакция на клик будет обычной. </p> <p class="events_none"> Реакция на клик будет отсутствовать. </p> </body> </html>
Пример №1