javascript - 只检测伪元素的点击事件

Question

请看这个 fiddle :http://jsfiddle.net/ZWw3Z/5/

我的代码是:

p {
    position: relative;
    background-color: blue;
}

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

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate...</p>

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

Answer 1

这是不可能的；伪元素根本不是 DOM 的一部分，因此您不能将任何事件直接绑定(bind)到它们，您只能绑定(bind)到它们的父元素。

如果你必须只在红色区域有一个点击处理程序，你必须制作一个子元素，比如 span , 将它放在开口之后 <p>标记，将样式应用于 p span而不是 p:before , 并绑定(bind)到它。