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

我有一个

div

元素和一个CSS伪元素

：：before

用作关闭按钮（而不是使用实际按钮）。如何仅将事件侦听器应用于伪元素

HTML

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

---

不存在。伪元素在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
    }
});

$（“#神话”）。单击（函数（e）{
如果（e.clientX>$（this）.offset（）.left+90&&
e、 clientY<$（this）.offset（）.top+10）{
//做点什么
}
});

html:

Foo

如果生成内容的位置和尺寸已知，则可以在元素本身上添加一个单击处理程序，并在处理它之前检查

---

这是有悖常理的，但也是可能的。

一般来说，正如其他人所指出的那样，答案是否定的但如果伪元素标记为空，例如

您可以包装一个

div

或

span

或任何适合您的标签。使用

：在

之前，但在页面上可以看到它捕获了

悬停

事件

例如：

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

---

如果你的标签是空的，只需要一个小把戏。

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

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;
}

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

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

JS

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

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

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

---

如果在

元素上不需要任何指针事件

，则可以使用此选项。签入。

什么是“HTMLElementNode对象”？具有事件绑定方法的实例。向下投票，因为这不再是有效答案。它应该被删除或更新以反映指针事件声明。@derek这个答案仍然是正确的-您不能将事件分配给伪元素。声明指针事件是一个很好的解决方法，但仅在div#box本身或div#box中的其他子元素不需要其他事件侦听器的情况下使用。@MosheYakov，关于所采用的解决方法的要点；取消了我的否决票。谢谢。也许可以检查这个问题，看看有没有什么想法不是你想要的，但实际上你可以只添加一个span元素，并根据自己的意愿添加事件侦听器。向上，解决了我的问题，但使用了

getBoundingClientRect（）

而不是jQuerys

offset（）

这不是捕获伪元素上的事件，而是父元素，因此不是有效答案。这应该是可接受的解决方案。但是，指针事件有两个问题：1）阻止容器元素容纳其他事件侦听器（您可能无论如何都不需要）；2）更重要的是，指针事件级联，因此必须允许它返回到需要交互的所有其他事件上。