CSS伪元素上的事件侦听器，例如::after和::before

Event listener on a CSS pseudo-element, such as ::after and ::before?

本文关键字：例如 after before 侦听器 元素 事件 CSS      更新时间：2023-09-26

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

正在寻找解决方案并找到了这个线程。现在想分享我的解决方法：

CSS

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

JS

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

如果您在element上不需要任何指针事件，则此操作有效。检查它的作用。

否。DOM中不存在伪元素，因此它没有代表它的HTMLElementNode对象。

jQuery中没有：before和：after选择器。然而，作为一种替代方案，您可以检查点击事件的位置，并检查它是否在您的伪元素上：

（我还没有测试过）

样式：

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

如果生成内容的位置和维度已知，则可以在元素本身上添加一个点击处理程序，并在处理之前检查鼠标的相对位置。

这是反常的，但也是可能的。

一般来说，别人说不但如果您的带有伪元素的标签为空，例如引导程序中的glyphicon。

您可以包装div或span或任何适合您的标签。引导程序中的Glyphicons使用:before，但在页面上您可以看到它捕获了hover事件。

示例：

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

假设您想将事件添加到上面的字形图标中，您可以使用jquery父选择器

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

这只是一个小技巧，以防您的标签为空。

相关文章：