Как отследить клик по псевдоэлементу?

Question

[zkrvndm]

Хочу роботов отловить, заспамили сайт визитами с нулевой активностью и тем самым снижают позиции.

Планирую сделать кнопку из псевдоэлемента Cогласен с Cookie и буду грузить метрику только после клика по ней.

Какие вы знаете способы отловить клик по псевдоэлементу? Понятно, что самый очевидный способ это по координатам, но какие еще способы есть? Наверное можно ловить клик по родителю, но как понять, что нажат именно псевдоэлемент?

Comments

[Danny Arty]

Никак, потому что псевдоэлементы не являются частью DOM

[zkrvndm]

Danny Arty, согласно ответу @MrColdCoffee оказывается все таки можно ловить клики по пседоэлементам не используя сверку по кординатам, крутой лайфхак, не зря вопрос задал) Иначе бы и не узнал никогда, что так можно.

Answer 1

[MrColdCoffee]

Итак, вот как можно отследить клик по псевдоэлементу:

HTML:

<!-- Наш элемент, у которого есть псевдоэлемент after -->
<div class="element-for-click">
  <span>Текст</span>
</div>

CSS:

.element-for-click{
    position: relative;
    pointer-events: none;
   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; / pointer-events: all;

Comments

[zkrvndm]

Гениально! Спасибо)

[MrColdCoffee]

zkrvndm, Если у вас в родителе есть другие элементы, клик по которым нужно отловить, то в CSS так же устанавливаем им pointer-events: auto; / pointer-events: all; и на js отлавливаем событие клика по ним ДО события клика по родителю, что-то делаем и возвращаем false, чтобы клик не пошёл дальше)

[zkrvndm]

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