Становится все труднее идти в ногу с достижениями CSS3. Просто когда вы думаете, что видели все, вы обнаруживаете невероятно полезную новую собственность.
Рассмотрим проблему HTML, когда один элемент перекрывает другой. Все элементы управления и ссылки в нижнем элементе нельзя использовать или щелкнуть. Иногда это может быть полезно, например, для показа модального диалога. Иногда это не так.
Давайте рассмотрим актуальный пример. Скажем, вы только что успешно приземлились на поверхность Марса . Но вместо того, чтобы анализировать скучные образцы горных пород или искать примитивную инопланетную жизнь, вы решаете направить свою мощную телескопическую камеру обратно на Землю, чтобы посмотреть популярное спортивное событие (я понимаю, что уже слишком поздно, но мы допустим аномалию пространства-времени открылся, расстояния кажутся гораздо большими, и вы просматриваете недавнюю историю) .
ОК — замысловатый пример, но терпите меня! По сути, зонд будет видеть карту через телескоп с красным оттенком …
Если бы мы хотели воспроизвести это на веб-странице, мы могли бы использовать API карты от Google, Bing или любого другого провайдера и наложить изображение телескопа. К сожалению, карта станет неработоспособной, и вы не сможете перетащить или увеличить масштаб, потому что элементы управления скрыты прозрачной графикой.
Указатель-события на помощь!
Значение по умолчанию для pointer-eventsauto, и наложенное изображение будет получать все события мыши, даже если оно не ожидает никаких событий. Тем не менее, установка его на none означает, что он никогда не будет целью событий мыши. Другими словами, карту можно перетаскивать и использовать, как если бы наложения не было.
Посмотрите CSS3 указатель-события Mars зонд олимпийский зритель демонстрационная страница …
Попробуйте это в Firefox, Chrome или Safari, и карта останется пригодной для использования. IE и Opera не поддерживают pointer-events
Установка pointer-eventsникогда не будет получать события мыши. Если дочерний элемент разрешает захват, он будет получать эти события, когда они всплывают в родительской цепочке.
Кроме того, pointer-events pointer-events
Для получения дополнительной информации обратитесь к документации событий указателя MDN . Я подозреваю, что вы можете подумать о многих ситуациях, когда собственность будет полезна.