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)到它。