Слушатель событий в псевдоэлементе CSS, например:: after and:: before?

У меня есть элемент div с псевдоэлементом CSS ::before, который используется как кнопка закрытия (вместо фактической кнопки). Как применить прослушиватель событий только к псевдоэлементу?

HTML

<div id="box"></div>

CSS

#box:before
{
 background-image: url(close.png);
 content: '';
 display: block; 
 height: 20px;
 position: absolute;
 top: -10px;
 right: -10px; 
 width: 20px;
}

#box
{
 height: 100px;
 width: 100px;
}

Ответ 1

Нет. Псевдоэлемент не существует в DOM, поэтому он не имеет объекта HTMLElementNode, представляющего его.

Ответ 2

Нет: до и: после селектора в jQuery. Однако в качестве альтернативы вы можете проверить местоположение события клика и проверить, находится ли он на вашем псевдоэлементе:

(я не тестировал это)

стиль:

#mything {
    width: 100px;
    height: 100px;
    position: relative;
    background: blue;
}
#mything:after {
    content: "x";
    font-size: 10px;
    position: absolute;
    top: 0;
    right: 0;
    background: red;
    width: 10px;
    height: 10px;
}

JavaScript:

$('#mything').click(function(e) {
    if (e.clientX > $(this).offset().left + 90 &&
        e.clientY < $(this).offset().top + 10) {
        // do something
    }
});

HTML:

<div id="mything">Foo</div>

Ответ 3

Ищет решение и нашел эту тему. Теперь хочу поделиться своим решением:

CSS

element { pointer-events: none; }
element::after { pointer-events: all; }

element.addEventListener('click', function() { ... });

Это работает, если вам не нужны какие-либо события указателя на element. Проверьте его в action.

Ответ 4

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

Это извращает, но возможно.

Ответ 5

Вообще говоря, нет, как указано другими. Но если ваш тег с псевдоэлементом пуст, например glyphicon в bootstrap.

Вы можете обернуть div или span или любой другой тег, подходящий в вашем случае. Глификон в бутстрапе использует :before, но на странице вы можете увидеть, что оно имеет событие hover.

Пример:

<span>
  <span class="glyphicon glyphicon-asterisk" aria-hidden="true"></span>
</span>

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

$('glyphicon').parent('span').click(function() { 
  // awesome things
});

Просто небольшой трюк , если твой тег пуст.