javascript - 仅检测伪元素上的点击事件(Only detect click event on pseudo-element)

Question

My code is:(我的代码是：)

p { position: relative; background-color: blue; } p:before { content: ''; position: absolute; left:100%; width: 10px; height: 100%; background-color: red; } Please see this fiddle: http://jsfiddle.net/ZWw3Z/5/(请查看此小提琴： 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.(也就是说，我不希望在蓝色部分触发点击事件。)   ask by Randomblue translate from so

Answer 1

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.(伪元素根本不是DOM的一部分，因此您不能将任何事件直接绑定到它们，而只能绑定到其父元素。) 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.(如果必须仅在红色区域上具有单击处理程序，则必须制作一个子元素（如span ，将其放置在开始<p>标记之后，将样式应用于p span而不是p:before ，并绑定到它。)