Пропуск событий мыши через элемент в CSS

Биcтpий відповідь

Щоб зробити елемент непроникненим для подій миші в CSS, скашийте властивість pointer-events: none;. Тепер події миші зможуть проходити до елементів, розміщених нижче нього.

.transparent {
  /* Вмикаю режим "невидимості" 👻 */
  pointer-events: none;
}

Призначивши елементу оверлею клас .transparent, ви зробите його недоступним для взаємодії з мишею. Ось, як це виглядає на прикладі:

<div>Тут основний контент чи кнопки 👀</div>
<div class="transparent" style="position: absolute;">Тут лише візуальний ефект. Не для кліків 👌</div>

Тепер ваш оверлей стає невидимим для курсора, забезпечуючи плавний користувацький досвід.

Сутність механізму

Властивість pointer-events: none; є безцінною в ситуаціях, коли важливо зберегти багаторівневу інтерактивність контенту, зберігаючи при цьому лаконічне керування. Давайте розглянемо це детальніше:

Установка pointer-events: none; робить елемент "невидимим" для подій миші, які потім перенаправляються на елемент на фоні. Це ідеально підходить для складних дизайнів з перекриваючимися елементами інтерфейсу, або для створення нескладних інтерактивних шарів поверх основного контенту.

Якщо ви хочете зробити деякі дочірні елементи всередині овелейу "клікабельними", їх слід вказати як pointer-events: all;. Такий підхід може виявитися корисним, наприклад, при роботі з меню або інтерактивною графікою.

.overlay {
  /* Вибачте, але торкнення заборонене 🙅‍♂️ */
  pointer-events: none;
}

.overlay .clickable-child {
  /* Крім цього елемента. Він потребує уваги 🙋‍♂️ */
  pointer-events: all;
}

Іноді виникає потреба програмно визначити елемент під курсором. В таких випадках вам пригодиться document.elementFromPoint(x, y), який допомагає знайти об'єкт поза сценою і контролювати події.

Зіткнулися з застарілими браузерами чи технологіями, де pointer-events не підтримується? Використовуйте обхідні шляхи: приховайте верхній елемент, знайдіть потрібний об'єкт за допомогою document.elementFromPoint і відновіть попередні умови.

Не забувайте перевіряти глобальну підтримку – pointer-events підтримується майже в 98.2% браузерів, включаючи навіть IE11.

Візуалізація

В кінцевому результаті наш абсолютно позиційований елемент стає привидом:

         👻
      (елемент)

Наче справжній привид, він пропускає через себе все що завгодно. Для цього потрібно лише трохи CSS:

.ghost {
  /* Я стаю привидом, жоден смертний не зможе мене торкнутися 🚫 */
  pointer-events: none; 
}

Якщо CSS налаштований правильно, курсор зможе взаємодіяти з контентом під "привидним" вуалем:

Контент під елементом
[🌳🌳🏰🌳]
   👆🐭
(Дія миші)

Таким чином, події миші взаємодіють з контентом за привидним перекриттям! 🐭👻👉🌐

Шари взаємодії та поширення подій

Створюйте багаторівневі інтерактивні інтерфейси, використовуючи прозорі div для шарів взаємодії та pointer-events для визначення реакції елементів на дії користувача.

Події миші взаємодіють з DOM так, ніби метеорит вдаряє в Землю, проходячи через всі шари і повертаючись назад. Знати про цей двосторонній процес — захоплення і спливання — дуже корисно для оптимізації його використання.

  Батьківський DIV
     👇
[🕳️Дочірній DIV🕳️]
   ↕️ (Подія миші)
[🌳🌳🏰🌳]

Ви можете організувати шари, як припливні хвилі, змінюючи z-index і налаштовуючи pointer-events відповідно до потреб, і навіть застосовувати JavaScript для динамічного контролю станів.

Глобальна підтримка та можливі складнощі

Чтобы интегрировать pointer-events в ваши проекты, учитывайте:

• Поддержка: Перевірте, чи вона доступна у таких рушіях, як Blink, Gecko і Webkit, і чи сумісне це з браузером користувача.
• Альтернативи при відсутності підтримки: Допоможе JavaScript.
• Продуктивність: Зі збільшенням складності можливе сповільнення роботи.

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

1. pointer-events – CSS: Cascading Style Sheets | MDN — базовий посібник з використання властивості CSS pointer-events для керування подіями миші.
2. Bubbling and capturing — детальне пояснення механізму поширення подій в DOM з описом фаз захоплення та всплиття.
3. html – css 'pointer-events' property alternative for IE – Stack Overflow — обговорення на Stack Overflow щодо способів реалізації pointer-events в Internet Explorer.
4. z-index | CSS-Tricks — ресурс для розуміння властивості z-index і керування контекстами перекриття.
5. Stacking context – CSS: Cascading Style Sheets | MDN — стаття на MDN про контексти стекування та взаємодію z-index з CSS позиціонуванням.