Работа с click event на псевдо-элементах CSS и HTML

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

.myElement::after {
  content: '';
  pointer-events: all; // Позволяет реагировать на все типы действий с мышью
}

document.addEventListener('click', function(e) {
  // Фиксируем клик, если он осуществлен по псевдоэлементу (за пределами ширины основного элемента)
  if (e.target.closest('.myElement') && e.offsetX > e.target.offsetWidth) {
    console.log('Клик произошёл по псевдоэлементу');
  }
});

Основная концепция: использование pointer-events: all; для псевдоэлемента в сочетании с определением координат клика относительно размеров основного элемента позволяет отслеживать клики именно по псевдоэлементу.

Продвинутый подход к псевдоэлементам

Псевдоэлементы не включаются прямо в структуру DOM, но их можно сделать интерактивными, удачно комбинируя CSS-правило pointer-events и JavaScript.

JavaScript: втягивание псевдоэлементов в игру

// Мы ценим псевдоэлементы и обрабатываем клики именно по ним
const myElement = document.querySelector('.myElement');
myElement.addEventListener('click', function(e) {
  // Стилизуем псевдоэлементы
  const style = getComputedStyle(e.target, '::after');
  const pseudoElWidth = parseInt(style.width);
  const pseudoElHeight = parseInt(style.height);
  
  // Следим за координатами X и Y клика в отношении элемента
  const relativeX = e.clientX – e.target.getBoundingClientRect().left;
  const relativeY = e.clientY – e.target.getBoundingClientRect().top;
  
  // Проверяем, попал ли клик в область псевдоэлемента
  if (relativeX > e.target.offsetWidth && relativeY <= pseudoElHeight) {
    console.log('Клик произошёл по псевдоэлементу');
  }
});

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

Псевдоэлементы и взаимодействие с ними

С использованием ::before и ::after создаются особые интерактивные зоны, в которых можно регулировать взаимодействие с пользователем посредством pointer-events.

Межбраузерная совместимость: мост к каждому пользователю

Не все старые браузеры поддерживают функцию pointer-events. В таких ситуациях на помощь придет JavaScript, возможности которого обеспечивают обход ограничений браузера.

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

Рассмотрим ситуацию, когда необходимо отследить клик по псевдоэлементу:

Мишень 🎯 – это наш элемент, а в её центре находится псевдоэлемент "::after".

div::after { content: "⭐️"; }

Клик по звезде (div::after) отрабатывает следующим образом:

            ┌─ Клик! 🖱️
            │
🎯====[ ⭐️ ] 
            │
            └─ не затронута 🎯 (div)

Задача: Реагировать только на клики по ⭐️, игнорируя 🎯.

Повышаем точность

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

Точное позиционирование при помощи координат клиента

Координаты clientX и clientY в объекте события click определяют абсолютное положение курсора мыши – вашего клика!

Адаптация под координаты страницы

e.pageX и e.pageY показывают позицию относительно всего документа, что дает возможность правильно реагировать на клики даже при прокручивании страницы.

jQuery: старое, но надёжное решение

Если вы используете jQuery, то функция offset() предоставит положение элемента относительно документа, обеспечивая точность обработки кликов.

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

1. Псевдоэлементы – CSS: Основы стилей – исчерпывающая документация MDN о псевдоэлементах.
2. Всплывающие и погружающиеся события – можем углубиться в мир всплывающих и погружающихся событий в JavaScript.
3. ::before и ::after | CSS-Tricks – руководство по осмыслению псевдоэлементов CSS ::before и ::after.
4. javascript – AngularJs ng-click $event передаёт дочерний элемент как target – Stack Overflow – обсуждение особенностей обработки кликов в AngularJS.
5. Указатель событий и отключение текущих ссылок страницы | CSS-Tricks – погрузитесь в мир событий указателя CSS.
6. Мастерство использования псевдоэлементов :before и :after в CSS — Smashing Magazine – детальное руководство, помогающее освоить :before и :after.
7. Делегирование событий – Дэвид Уолш делится советами о модели делегирования событий в JavaScript.