仅检测伪元素上的单击事件。

Question

仅检测伪元素上的单击事件。

我的代码是：

p {
    position: relative;
    background-color: blue;}p:before {
    content: '';
    position: absolute;
    left:100%;
    width: 10px;
    height: 100%;
    background-color: red;}

请看这把小提琴：http://jsfiddle.net/ZWw3Z/5/

我只想在伪元素(红色位)上触发单击事件。也就是说，我不希望在蓝色位上触发单击事件。

Answer 1

这是不可能的；伪元素根本不是DOM的一部分，所以不能将任何事件直接绑定到它们，只能绑定到它们的父元素。如果必须仅在红色区域上使用单击处理程序，则必须生成一个子元素，如span，把它放在开口后<p>标记，将样式应用于p span而不是p:before和它绑在一起。

Answer 2

事实上，这是可能的。您可以检查单击的位置是否在元素之外，因为只有在以下情况下才会发生这种情况：::before或::after被点击了。此示例只检查右边的元素，但在您的情况下应该有效。span = document.querySelector('span');span.addEventListener('click', function (e) {&nbsp; &nbsp; if (e.offsetX > span.offsetWidth) {&nbsp; &nbsp; &nbsp; &nbsp; span.className = 'c2';&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; span.className = 'c1';&nbsp; &nbsp; }});div { margin: 20px; }span:after { content: 'AFTER'; position: absolute; }span.c1 { background: yellow; }span.c2:after { background: yellow; }<div><span>ELEMENT</span></div>