Решение: альтернатива свойству 'pointer-events' в IE

Быстрый ответ

Для обхода ограничений свойства pointer-events: none в Internet Explorer можно разместить поверх прозрачный div:

<div class="invisibleShield" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: transparent; z-index: 10;"></div>

Такой прозрачный div, который мы назвали "Невидимый Щит", перехватывает и блокирует все взаимодействия с элементами под ним. Параметры position, left, top, right и bottom позволяют настроить защиту нужной области.

Обход ограничений IE с помощью JavaScript

JavaScript становится нашим спасением, когда CSS не справляется с задачей. Используйте альтернативное решение с методом document.elementFromPoint(), чтобы определить элемент под курсором и генерировать события так, словно вы ниндзя:

var invisibleShield = document.querySelector('.invisibleShield');
invisibleShield.addEventListener('click', function(e) {
  invisibleShield.style.display = 'none'; // Щит исчезает!
  var hiddenElem = document.elementFromPoint(e.clientX, e.clientY); // Обнаруживаем скрытый элемент.
  e.target = hiddenElem; // Заменяем цель события.
  hiddenElem.click(); // Имитируем клик по скрытому элементу.
  invisibleShield.style.display = 'block'; // Возвращаем щит на место.
});

Магия CSS

Используя CSS, можно применить алтернативное поведение, имитирующее pointer-events в IE. Это создаст визуальный эффект при наведении, создающий иллюзию недостижимости элемента:

a:hover { // Эффект: изменение цвета ссылки при наведении.
  color: red; // Смена стиля на красный цвет.
}

Деактивация ссылок

В IE можно деактивировать ссылки без использования JavaScript, применяя атрибут disabled и визуально выделяя их неактивность:

<a href="#" disabled="disabled">Я неактивная, не кликайте на меня!</a>

a[disabled] { // Стилизация неактивных ссылок.
  pointer-events: none;
  color: grey; // Цвет ссылки меняется на серый.
}

Полифилл для реализации событий указателя

Pointer Events Polyfill — это инструмент, создающий эффект работы pointer-events в любом браузере, включая IE:

<!-- Применяем магию Полифилла -->
<script src="pointer_events_polyfill.js"></script>

Скрытый потенциал SVG

Встроенный SVG как супергерой может поддерживать pointer-events в своем контексте. Это позволяет замаскировать HTML-элементы, делая их нечувствительными к взаимодействиям:

<svg>
  <rect width="100" height="100" pointer-events="none"></rect> <!-- Создаем непроницаемый защитный барьер. -->
</svg>

Визуализация

Представьте себя в виртуальном торговом центре с прозрачными витринами:

Стекло Витрины (🏬): Вы видите аппетитные торты, но не можете к ним прикоснуться.

Функциональность pointer-events в CSS определяет, сможет ли посетитель дотронуться до лакомств за стеклом:

pointer-events: none;    // 🏬❌👆 – Сладости недосягаемы.
pointer-events: auto;    // 🏬✅👆 – Ух ты, я могу их коснуться!

Для IE мы используем невидимый щит:

Версия для IE: 🛡️ – Невидимость в действии. Возможно, посетители её даже не заметят!

Особенности IE

Манипуляции с видимостью в CSS

Internet Explorer можно "заколдовать" с помощью проверенных временем CSS методов, таких как свойства z-index, opacity и visibility для управления видимостью элементов.

Подробнее об этом расскажет наш спикер на видео

Захват и всплытие событий

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

Специальные стили для IE с использованием условных комментариев

Используйте магию условных комментариев, чтобы применять специальные стили для IE:

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-special-styles.css" />
<![endif]-->

Инструментарий Modernizr

Применяйте Modernizr для определения возможностей IE. Этот инструмент позволит в нужный момент использовать условные блоки кода, в зависимости от наличия свойства pointer-events.

Полезные материалы

1. Поддержка свойства 'pointer-events' в браузерах
2. MDN Web Docs – описание свойства pointer-events
3. GitHub – jquery-archive/PEP: Pointer Events Polyfill
4. pointer-events на CSS-Tricks
5. Stack Overflow – альтернативы свойства 'pointer-events' для IE
6. GitHub – kmewhort/pointer_events_polyfill: Polyfill
7. Документация Modernizr