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