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

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

在单击事件中添加条件以限制可单击区域。

    $('#thing').click(function(e) {
       if (e.clientX > $(this).offset().left + 90 &&
             e.clientY < $(this).offset().top + 10) {
                 // action when clicking on after-element
                 // your code here
       }
     });

DEMO

我将发布解决方案:

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)
    };
}

不，但你可以这样做

在html文件中添加此部分

<div class="arrow">
</div>

在css中你可以这样做

p div.arrow {
    content: '';
    position: absolute;
    left:100%;
    width: 10px;
    height: 100%;
    background-color: red;
} 

希望对你有所帮助

我用add pointer-events解决了这个问题:none;在:CSS之后

在现代浏览器中，您可以尝试使用css属性pointer-events(但这导致无法检测父节点上的鼠标事件):

p {
    position: relative;
    background-color: blue;
    color:#ffffff;
    padding:0px 10px;
    pointer-events:none;
}
p::before {
    content: attr(data-before);
    margin-left:-10px;
    margin-right:10px;
    position: relative;
    background-color: red;
    padding:0px 10px;
    pointer-events:auto;
}

当事件目标是“p”元素时，您就知道它是“p:before”。

如果仍然需要检测主p上的鼠标事件，可以考虑修改HTML结构。您可以添加span标签和以下样式:

p span {
    background:#393;
    padding:0px 10px;
    pointer-events:auto;
}

事件目标现在是“span”和“p:before”元素。

不使用jquery的示例:http://jsfiddle.net/2nsptvcu/

jquery示例:http://jsfiddle.net/0vygmnnb/

下面是支持指针事件的浏览器列表:http://caniuse.com/#feat=pointer-events