Опубликовано 16.10.2023
Інколи буває потреба зробити так, щоб певний HTML елемент не реагував на подію "клік" і пропускав цей клік крізь себе до тих елементів, які знаходяться "під" або "над" ним.
Для цього в нас є властивість CSS pointer-events
Часто це стосується псевдо-елементів, таких як :before або :after. Проблема в тому, що такі елементи не є частиною DOM-дерева, на них не можна навішувати слухачів подій, але в той самий час ці елементи можуть блокувати клік миші і не пропускати подію до дочірнього елементу.
Наприклад, у нас є батьківський елемент, у цього елемента є псевдо-елемент after. Окрім цього в середині батьківського елемента є дочірній елемент, який містить певний текст - назву. Ми можемо зробити клік по дочірньому елементу, але так як поруч з ним є псевдо-елемент after, він затуляє частину назви і не пропускає крізь себе клік. В такому випадку подія клік не буде спрацьовувати в місці перекриття елементів.
Розглянемо на конкретному прикладі і спробуємо проклікати елементи. Нижче фіксується кількість кліків.
Додаємо CSS властивість pointer-events: none; до псевдо-елементу after, і клік починає проходити наскрізь.
Також це впливає на вигляд курсору над псевдоелементом.
За замовченням, властивість pointer-events має значення auto.
Докладніше можна почитати тут