我想知道如何启用
:before
伪元素(我在下面链接到的 JSfiddle 上 div 的橙色部分)的点击。我读过,由于伪元素不在 DOM 中,因此您需要对此进行修改。不幸的是,我找不到实际显示工作代码的现有 Stackoverflow 问答。
链接:http://jsfiddle.net/Vv6Eb/4/
HTML:
<div></div>
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;
}
如果您知道圆“应该”在哪里,则可以使用三角学来查看单击是否在圆内: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');
});
解决此问题的方法是将
<span>
动态附加到项目并为其分配单击方法。 喜欢这个小提琴。
var item = $('<span />');
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;
}
我知道你正在尝试使用 :before,但是对于这种情况,你不能创建一个新的 div 并使用一个类作为钩子并将其附加到原始 div 吗?
这样的东西可能会起作用:
var newDiv = $("<div class='orangeCircle'>");
$(".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;
}
只是喜欢使用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>
我的目的是通过另一种解决方法解决的,即添加一个子 DIV。将父级内的所有子元素包装到这个新的子 DIV 中:
我的工作示例与问题陈述相同:参见小提琴
HTML:
<div class="parentDiv">
:before
<div class="childDiv">
<!-- child elements -->
</div>
</div>
**注意:忽略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!');
}
});
});
Medium 上有一篇关于此的文章。
此外,CodePen
基本思想是追踪伪元素所在的位置。 下面的代码片段显示了没有边框半径的矩形的更一般情况,并在单击伪元素时关闭父元素。
const dismissable = document.querySelectorAll(".dismissable")
dismissable.forEach((d) => {
d.addEventListener("click", (e)=>{
// First we get the pseudo-elements style
const target = e.currentTarget || e.target
const after = getComputedStyle(target, ":after")
if (after) {
// Then we parse out the dimensions
const atop = Number(after.getPropertyValue("top").slice(0, -2))
const aheight = Number(after.getPropertyValue("height").slice(0, -2))
const aleft = Number(after.getPropertyValue("left").slice(0, -2))
const awidth = Number(after.getPropertyValue("width").slice(0, -2))
// And get the mouse position
const ex = e.layerX
const ey = e.layerY
// Finally we do a bounds check (Is the mouse inside of the after element)
if (ex > aleft && ex < aleft+awidth && ey > atop && ey < atop+aheight) {
console.log("Button clicked")
target.style.display = "none"
}
}
})
})
.dismissable {
position: relative;
width: 300px;
height: 300px;
border: 1px solid black;
border-radius: 5px;
}
.dismissable:hover::after {
content: "x";
font-size: 3rem;
display: block;
position: absolute;
top: 10px;
left: 10px;
cursor: pointer;
}
<div class="dismissable"></div>