使用javascript点击一个伪元素？
我想知道如何启用单击a :before伪元素（JSfiddle的链接到下面的div的橙色部分）。 我已经读过，因为伪元素不在DOM中，所以你需要一个hack。 不幸的是，我找不到实际显示工作代码的现有Stackoverflow问答。
链接： http ： //jsfiddle.net/Vv6Eb/4/
HTML：
CSS：
div { position:relative; background-color:#333; padding:20px; margin:20px; float:left; } div:before { content:""; display:block; padding:5px; background-color:#f60; border:2px solid white; position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px; }
解决方法是动态地将附加到项目并为其指定单击方法。 喜欢这个小提琴。
var item = $(''); item.click(function() { alert('click'); }); $('div').append(item);
CSS
div { position:relative; background-color:#333; padding:20px; margin:20px; float:left; } div span { content:""; display:block; padding:5px; background-color:#f60; border:2px solid white; position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px; }
如果您知道圆圈“应该”在哪里，您可以使用三角学来查看点击是否在圆圈内： http ： //jsfiddle.net/Vv6Eb/19/
$("div").click(function(e){ var $me = $(this), width = $me.outerWidth(), height = $me.outerHeight(), top = $me.position().top, left = $me.position().left; var len = Math.sqrt(Math.pow(width - e.offsetX, 2) + Math.pow(e.offsetY, 2)); if (len < 10) alert('ding'); });
我知道你正在尝试使用：之前，但是对于这种情况，你不能只创建一个带有类的新div用作钩子并将其附加到原始div吗？
这样的事情可能有用：
var newDiv = $(""); $(".parentDivToOrangeCircle").append(newDiv);
而CSS：
.parentDivToOrangeCircle { position:relative; background-color:#333; padding:20px; margin:20px; float:left; } .orangeCircle { padding:5px; background-color:#f60; border:2px solid white; position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px; }
我的目的是通过另一种解决方法解决的，即添加一个子DIV。 将父级内的所有子元素包装到这个新子级DIV中：
我的工作样本与问题陈述相同： 见小提琴
HTML：
:before
**注意：忽略:before在HTML :before ，只是显示才能理解。
CSS：
div.parentDiv{position:relative; background-color:#333; padding:0; margin:20px; float:left; } div.parentDiv:before { content:""; display:block; padding:5px; background-color:#f60; border:2px solid white; position: absolute; top:-2px; right:-2px; border-bottom-left-radius: 10px; cursor:pointer} div.childDiv{padding:20px; margin:0}
jQuery的：
jQuery(document).ready(function($){ $('div.parentDiv').click(function(e){ if( $(e.target).closest('.childDiv').length==0 ){ //so clicked on psudo :before element! //do your work here ;) alert('Psudo :before element is clicked!'); } }); });
只是喜欢使用jquery
$(document).on("click", "span", function(e){ if (e.offsetX > $(this)[0].offsetWidth) { alert('clicked on after'); } else { alert('clicked on main span'); } })
div { margin: 20px; } span:after { content: 'AFTER'; position: absolute; }
ELEMENT