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

我的代码是:

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/

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

最佳答案

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

如果必须仅在红色区域上具有单击处理程序，则必须制作一个子元素，例如span，将其放置在打开的<p>标记之后，然后将样式应用于p span而不是p:before并绑定(bind)到它。