Как определить, был ли произведен клик на псевдоэлементе?

Определить, был ли произведен клик на псевдоэлементе можно с помощью следующих методов:

1. Использование события click: Вы можете добавить слушатель события click к псевдоэлементу и проверить, было ли это событие активировано. Пример:

```javascript
document.querySelector('.element::before').addEventListener('click', function(event) {
  console.log('Клик произведен на псевдоэлементе ::before');
});
```

2. Использование события mousedown/mouseup: Вы можете добавить слушатель события mousedown или mouseup к псевдоэлементу и проверить, было ли это событие активировано. Пример:

```javascript
document.querySelector('.element::before').addEventListener('mousedown', function(event) {
  console.log('Нажатие мыши произведено на псевдоэлементе ::before');
});

document.querySelector('.element::before').addEventListener('mouseup', function(event) {
  console.log('Отпускание мыши произведено на псевдоэлементе ::before');
});
```

Обнаружить клик по псевдоэлементу, кроме использования координат, в общем случае невозможно. Псевдоэлементы не являются элементами DOM и не имеют своих собственных обработчиков событий. Они являются фантомными элементами, которые отображаются внутри реальных элементов DOM, поэтому все события, связанные с кликом, в основном отслеживаются на родительских элементах.

HTML:


  Текст


CSS:
.element-for-click{
    position: relative;
    background:red;
    padding:20px;
}

.element-for-click:after {
    content: 'Псевдоэлемент';
    position: absolute;
    padding:20px;
    background-color: #4caf50;
    cursor: pointer;
    pointer-events: auto;
    text-align: center;
    top: 0;
    right:10%;
    color: #FFF;
    font-weight: bold;
}

JS:
document.querySelector('.element-for-click').addEventListener('click', ()=>{
   alert('Клик по псевдоэлементу');
});

При помощи CSS мы отключаем у родителя события указателя (pointer-events: none;), а у псевдоэлемента включаем события указателя (pointer-events: auto;).