Спецификация CSS3 определяет свойство pointer-events (события при взаимодействии с указателем) как: «Свойство pointer-events позволяет контролировать, можно ли и при каких условиях взаимодействовать с элементом при помощи указателя, например, мыши. Это свойство используется для задания обстоятельств, при которых событие, создаваемое указателем мыши, будет распространяться сквозь элемент на лежащий под ним элемент. Это также применимо при определении, попадает ли указатель пользователя на определенный элемент, например, для псевдоклассов :hover (при наведении указателя мыши), :active (при нажатии), :focus (при активации элемента), гиперссылок и метода Document.elementFromPoint()». 

Это свойство изначально было только у элементов SVG, но со временем браузеры и W3C приняли ограниченную версию и для элементов HTML.

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

Свойство -webkit-appearance: none нужно, чтобы движок Webkit не применял свойства по умолчанию для задания внешнего вида. Однако это свойство так же отменяет изначальную стрелку выпадающего списка, и новая уникальная стрелка может заслонять часть текста, так что приходится добавить внутренний отступ справа 30px элементу выбора только для движка Webkit.

Можно легко определить, поддерживается ли свойство pointer-events с помощью кода JS, и применять его, только если оно поддерживается, например, добавляя или удаляя класс элемента:

if(!('pointerEvents' in document.body.style)) {

...
}

У библиотеки Modernizer есть более полный скрипт определения поддержки, его код довольно краток, так что его можно переделывать по необходимости.

Не пробуйте создавать поведение этого свойства с помощью JavaScript для браузеров, которые его не поддерживают: невозможно открыть выпадающий список, используя  JavaScript. Ну или ни у кого пока что это не получалось.

За дополнительной информацией можно обратиться к следующим источникам:

• спецификация W3C 

• статья Mozilla Developer Network

Автор урока Lea Verou

Перевод — Дежурка

Смотрите также:

• Создание рейтинга в виде звезд с использованием только CSS
• Создание интересного выпадающего меню с использованием CSS3
• Меню с плавно выпадающими подпунктами с использованием CSS3