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

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) {

    if (e.offsetX > span.offsetWidth) {

        span.className = 'c2';

    } else {

        span.className = 'c1';

    }

});

div { margin: 20px; }

span:after { content: 'AFTER'; position: absolute; }

span.c1 { background: yellow; }

span.c2:after { background: yellow; }

<div><span>ELEMENT</span></div>