只检测伪元素的点击事件 [英] Only detect click event on pseudo-element

问题描述

我的代码是：

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/

我想只触发伪元素（红色位）。也就是说，我不想在蓝色位上触发点击事件。

I would like to trigger a click event only on the pseudo-element (the red bit). That is, I don't want the click event to be triggered on the blue bit.

推荐答案

伪元素不是DOM的一部分，因此您不能将任何事件直接绑定到它们，您只能绑定到其父元素。

This is not possible; pseudo-elements are not part of the DOM at all so you can't bind any events directly to them, you can only bind to their parent elements.

如果您必须只在红色区域上有一个点击处理程序，您必须创建一个子元素，如 span ，将其放在开头< p> ; 标签，将样式应用于 p span 而不是 p：before

If you must have a click handler on the red region only, you have to make a child element, like a span, place it right after the opening <p> tag, apply styles to p span instead of p:before, and bind to it.

这篇关于只检测伪元素的点击事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！