CSS伪元素上的事件监听器,例如:: after和:: before？

Question

我有一个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;
}

Answer 1

不可以.在DOM中不存在伪元素,因此它没有HTMLElementNode表示它的对象.

Answer 2

正在寻找解决方案,并找到了这个线程.现在想分享我的解决方案:

CSS

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

JS

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

如果您不需要任何指针事件,则此方法有效element.检查它的实际效果.

Answer 3

在jQuery中没有:before和:after选择器.但是,作为替代方法,您可以检查click事件的位置并检查它是否在您的伪元素上:

(我没有测试过这个)

样式:

#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>