我的答案将适用于任何想要点击页面特定区域的人。这对我的绝对定位很有效:之后

多亏了这篇文章，我意识到(使用jQuery)我可以使用e.pageY和e.pageX，而不用担心浏览器之间的e.f offsety /X和e.c reenty /X问题。

Through my trial and error, I started to use the clientX and clientY mouse coordinates in the jQuery event object. These coordinates gave me the X and Y offset of the mouse relative to the top-left corner of the browser's view port. As I was reading the jQuery 1.4 Reference Guide by Karl Swedberg and Jonathan Chaffer, however, I saw that they often referred to the pageX and pageY coordinates. After checking the updated jQuery documentation, I saw that these were the coordinates standardized by jQuery; and, I saw that they gave me the X and Y offset of the mouse relative to the entire document (not just the view port).

我喜欢这个活动。pageY的想法，因为它总是相同的，因为它是相对于文档。我可以使用offset()将它与我的:after的父元素进行比较，它返回的X和Y也是相对于文档的。

因此，我可以在整个页面上提出一个永不改变的“可点击”区域范围。

这是我关于codeen的演示。

或者如果懒得用codeen，下面是JS:

我只关心例子中的Y值。

var box = $('.box');
// clickable range - never changes
var max = box.offset().top + box.outerHeight();
var min = max - 30; // 30 is the height of the :after

var checkRange = function(y) {
  return (y >= min && y <= max);
}

box.click(function(e){
  if ( checkRange(e.pageY) ) {
    // do click action
    box.toggleClass('toggle');
  }
});

这对我来说很管用:

$('#element').click(function (e) {
        if (e.offsetX > e.target.offsetLeft) {
            // click on element
        }
         else{
           // click on ::before element
       }
});

我的答案将适用于任何想要点击页面特定区域的人。这对我的绝对定位很有效:之后

多亏了这篇文章，我意识到(使用jQuery)我可以使用e.pageY和e.pageX，而不用担心浏览器之间的e.f offsety /X和e.c reenty /X问题。

Through my trial and error, I started to use the clientX and clientY mouse coordinates in the jQuery event object. These coordinates gave me the X and Y offset of the mouse relative to the top-left corner of the browser's view port. As I was reading the jQuery 1.4 Reference Guide by Karl Swedberg and Jonathan Chaffer, however, I saw that they often referred to the pageX and pageY coordinates. After checking the updated jQuery documentation, I saw that these were the coordinates standardized by jQuery; and, I saw that they gave me the X and Y offset of the mouse relative to the entire document (not just the view port).

我喜欢这个活动。pageY的想法，因为它总是相同的，因为它是相对于文档。我可以使用offset()将它与我的:after的父元素进行比较，它返回的X和Y也是相对于文档的。

因此，我可以在整个页面上提出一个永不改变的“可点击”区域范围。

这是我关于codeen的演示。

或者如果懒得用codeen，下面是JS:

我只关心例子中的Y值。

var box = $('.box');
// clickable range - never changes
var max = box.offset().top + box.outerHeight();
var min = max - 30; // 30 is the height of the :after

var checkRange = function(y) {
  return (y >= min && y <= max);
}

box.click(function(e){
  if ( checkRange(e.pageY) ) {
    // do click action
    box.toggleClass('toggle');
  }
});

这是不可能的;伪元素根本不是DOM的一部分，所以你不能将任何事件直接绑定到它们，你只能绑定到它们的父元素。

如果你必须在红色区域上有一个点击处理程序，你必须创建一个子元素，比如span，把它放在<p>标签后面，将样式应用到p span而不是p:before，并绑定到它。

我将发布解决方案:

Offset()方法获取根元素的左上角信息。 getcomputedstyle()方法获取伪元素的样式。

请确保根元素的位置属性是相对的，而伪元素的位置属性是绝对的。 提琴演示在这里。 希望这能有所帮助。

额外的评论: 这个问题是11年前提出的，现在已经有了一个公认的答案。 我不顾上述事实发布这个解决方案的原因如下。

在伪元素上检测点击事件时，我也有同样的想法。 接受的答案(“添加子元素”)不能满足我的需求。 多亏了这个帖子，我有了解决方案的想法。 如果有人有类似的问题可以通过这篇文章来解决，我会很高兴。

/**
 * Click event listener.
 */
$(element).click((e) => {
    // mouse cursor position
    const mousePoint = { x: e.pageX, y: e.pageY };

    if (isMouseOnPseudoElement(mousePoint, e.target, 'before')) {
        console.log('[:before] pseudo-element was clicked');
    } else if (isMouseOnPseudoElement(mousePoint, e.target, 'after')) {
        console.log('[:after] pseudo-element was clicked');
    }
});

/**
 * Returns the info of whether the mouse cursor is over the pseudo-element.
 *
 * @param {JSON} point: coordinate of mouse cursor
 * @param {DOMElement} element: root element
 * @param {String} pseudoType: "before" or "after"
 * @returns {JSON}: info of whether the mouse cursor is over the pseudo-element
 */
function isMouseOnPseudoElement(point, element, pseudoType = 'before') {
    const pseudoRect = getPseudoElementRect(element, pseudoType);

    return point.y >= pseudoRect.top
        && point.y <= pseudoRect.bottom
        && point.x >= pseudoRect.left
        && point.x <= pseudoRect.right;
}

/**
 * Gets the rectangle info of the pseudo-element.
 *
 * @param {DOMElement} element: root element
 * @param {String} pseudoType: "before" or "after"
 * @returns {JSON}: rectangle info of the pseudo-element
 */
function getPseudoElementRect(element, pseudoType = 'before') {
    // top-left info of the root element
    const rootOffset = $(element).offset();

    // style of the pseudo-element
    const pseudoStyle = window.getComputedStyle(element, ':' + pseudoType);

    const top = rootOffset.top + parseFloat(pseudoStyle.top);
    const left = rootOffset.left + parseFloat(pseudoStyle.left);

    const height = parseFloat(pseudoStyle.height);
    const width = parseFloat(pseudoStyle.width);
    const borderTop = parseFloat(pseudoStyle['border-top-width']);
    const borderBottom = parseFloat(pseudoStyle['border-bottom-width']);
    const borderLeft = parseFloat(pseudoStyle['border-left-width']);
    const borderRight = parseFloat(pseudoStyle['border-right-width']);

    // rounds the decimal numbers detected when zooming
    return {
        top: Math.round(top),
        left: Math.round(left),
        bottom: Math.round(top + height + borderTop + borderBottom),
        right: Math.round(left + width + borderLeft + borderRight)
    };
}

这是由Fasoeu用最新的CSS3和JS ES6编辑的答案

编辑的演示没有使用JQuery。

最短的代码示例:

<p><span>Some text</span></p>

p {
    position: relative;
    pointer-events: none;
}
p::before {
    content: "";
    position: absolute;
    pointer-events: auto;
}
p span {
    display: contents;
    pointer-events: auto;
}

const all_p = Array.from(document.querySelectorAll('p'));

for (let p of all_p) {
    p.addEventListener("click", listener, false);
};

解释:

pointer-events control detection of events, removing receiving events from target, but keep receiving from pseudo-elements make possible to click on ::before and ::after and you will always know what you are clicking on pseudo-element, however if you still need to click, you put all content in nested element (span in example), but because we don't want to apply any additional styles, display: contents; become very handy solution and it supported by most browsers. pointer-events: none; as already mentioned in original post also widely supported.

JavaScript部分还使用了广泛支持的Array.from和for…的，但是在代码中不需要使用它们。