Javascript 使用javascript点击伪元素？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12692762/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Use javascript to click on a pseudo-element?
提问by tim peterson
I'm wondering how to enable the clicking on a :beforepseudo-element (the orange part of the div on the JSfiddle I link to below). I've read that since pseudo-elements aren't in the DOM you would need a hack for this. Unfortunately, I can't find an existing Stackoverflow Q&A that actually shows working code.
我想知道如何启用对:before伪元素的点击（我在下面链接到的 JSfiddle 上 div 的橙色部分）。我读过，由于伪元素不在 DOM 中，因此您需要对此进行黑客攻击。不幸的是，我找不到实际显示工作代码的现有 Stackoverflow 问答。
Link: http://jsfiddle.net/Vv6Eb/4/
链接：http: //jsfiddle.net/Vv6Eb/4/
HTML:
HTML：
<div></div>
CSS:
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;
}
采纳答案by VVV
A workaround for this would be to dynamically append a <span>to the item and assigning a click method to it. Like this fiddle.
一种解决方法是动态地将 a 附加<span>到项目并为其分配一个 click 方法。像这个小提琴。
var item = $('<span />');
item.click(function() { alert('click'); });
$('div').append(item);
CSS
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;
}
回答by Shmiddty
If you know where the circle "should" be, you can use trigonometry to see if the click is within the circle: http://jsfiddle.net/Vv6Eb/19/
如果您知道圆圈“应该”在哪里，您可以使用三角函数查看点击是否在圆圈内：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');
});?
回答by Jordan Denison
I know you are trying to use :before, but for this situation, can't you just create a new div with a class to use as a hook and append it to the original div?
我知道您正在尝试使用 :before，但是对于这种情况，您不能创建一个带有类的新 div 以用作挂钩并将其附加到原始 div 中吗？
Something like this might work:
像这样的事情可能会奏效：
var newDiv = $("<div class='orangeCircle'>");
$(".parentDivToOrangeCircle").append(newDiv);
And the CSS:
和 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;
}
回答by Suresh Suthar
Do simply like using jquery
做简单的喜欢使用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; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><span>ELEMENT</span></div>回答by Reza Mamun
My purpose was solved by another workaround which is just adding a child DIV. Wrapping up all child elements inside the parent into this new child DIV:
我的目的是通过另一种解决方法解决的，它只是添加一个子 DIV。将父元素中的所有子元素包装到这个新的子 DIV 中：
My working sample as same as the problem statement: See Fiddle
我的工作示例与问题陈述相同：参见 Fiddle
HTML:
HTML：
<div class="parentDiv">
:before
<div class="childDiv">
<!-- child elements -->
</div>
</div>
**Note: Ignore the :beforein the HTML, just showing to understand.
**注意：忽略:beforeHTML中的，只显示理解。
CSS:
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：
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!');
}
});
});
