是否可以使用jQuery检测到:after或:before伪元素的单击? [英] Is it possible to detect a click of an :after or :before pseudo element with jQuery?

问题描述

让我说:

<div></div>

具有:

div {
    width: 500px;
    height: 500px;
    position: relative;
}
div:after {
    content: '';
    display: block;
    width: 20px;
    height: 20px;
    position: absolute;
    top: 0;
    right: 0;
}

我可以做类似$('div:after').click(function(){...});的事情吗?如果我单击div而不是div:after，则不会触发.

Can I do something like $('div:after').click(function(){...}); ? And have it not fire if I am clicking on div but not div:after.

推荐答案

也许.根据伪内容的结构，您将不得不依靠计算鼠标位置来获得实际div的点击.事件处理程序将全部放在div上，而不是伪元素上，因为它在DOM中不存在.

Maybe. Depending on how you structure your pseudo content you would have to rely on calculating mouse position for clicks on the actual div. The event handlers would all go on the div, and not the pseudo element because it doesn't exist in the DOM.

请参见操纵CSS:before和:after伪元素使用jQuery 了解更多信息.尤其是BoltClock的答案.

See Manipulating CSS :before and :after pseudo-elements using jQuery for some more info. Especially BoltClock's answer.

另请参见Felix的注释，以获取无需鼠标定位的另一种可能的解决方案:仅检测点击伪元素事件

Also see Felix's comment for another possible solution without mouse position: Only detect click event on pseudo-element

这篇关于是否可以使用jQuery检测到:after或:before伪元素的单击?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！