Покажчик-події - CSS-хитрощі

pointer-eventsВластивість дозволяє управляти над тим, як HTML елементи реагують на миша / сенсорні події - в тому числі CSS ширяння / активних станів, натисніть / TAP подій в JavaScript, і буде чи курсор видно.

.avoid-clicks ( pointer-events: none; )

Хоча pointer-eventsвластивість приймає одинадцять можливих значень, усі, крім трьох, зарезервовані для використання з SVG. Три допустимі значення для будь-якого елемента HTMl:

none запобігає всім параметрам клацання, стану та курсору для вказаного елемента HTML
autoвідновлює функціональність за замовчуванням (корисна для використання в дочірніх елементах елемента із pointer-events: none;зазначеним
inheritбуде використовувати pointer-eventsзначення батьківського елемента

Перевірте цю ручку!

Як було продемонстровано вище, основним варіантом використання pointer-eventsє дозволяти поведінці клацання або натискання "проходити" через елемент до іншого елемента під ним на осі Z. Наприклад, це було б корисно для графічних накладок або приховування елементів за допомогою opacity(наприклад, підказки), а також дозволяючи виділяти текст на вміст під ним.

Цікаві місця

«Використання покажчиків-подій у CSS для елементів, що не є SVG, є експериментальним. Раніше ця функція була частиною специфікації проекту інтерфейсу CSS3, але через багато відкритих питань була відкладена на CSS4 ". - Mozilla MDN
"Якщо ви додаєте прослуховувач події кліку до елемента, то видаляєте стиль подій покажчика (або змінюєте його значення на автоматичне, подія кліку запускатиме призначену функціональність. В основному подія кліку відповідає значенню покажчика подій." - Девід Уолш

Підтримка браузера

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.