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

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

CSS

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

JS

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

如果您不需要 element 上的任何指针事件，这将起作用。查看action .