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

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

事实上，这是可能的。您可以检查单击的位置是否在元素之外，因为这只会在单击::before或被::after单击时发生。

此示例仅检查右侧的元素，但这应该适用于您的情况。

span = document.querySelector('span');

span.addEventListener('click', function (e) {
    if (e.offsetX > span.offsetWidth) {
        span.className = 'c2';
    } else {
        span.className = 'c1';
    }
});

div { margin: 20px; }
span:after { content: 'AFTER'; position: absolute; }

span.c1 { background: yellow; }
span.c2:after { background: yellow; }

<div><span>ELEMENT</span></div>

JSFiddle

在现代浏览器上，您可以尝试使用 pointer-events css 属性（但它会导致无法检测父节点上的鼠标事件）：

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

简答：

我做的。我为那里的所有小人物写了一个动态使用的函数......

显示在页面上的工作示例

登录到控制台的工作示例

长答案：

……还是做了。

我花了一段时间才这样做，因为页面上并没有真正的伪元素。虽然上面的一些答案在某些情况下有效，但它们都不能既是动态的，也不能在元素的大小和位置都出乎意料的情况下工作（例如绝对定位元素覆盖父元素的一部分）。我的没有。

用法：

//some element selector and a click event...plain js works here too
$("div").click(function() {
    //returns an object {before: true/false, after: true/false}
    psuedoClick(this);

    //returns true/false
    psuedoClick(this).before;

    //returns true/false
    psuedoClick(this).after;

});

怎么运行的：

它抓取父元素的高度、宽度、顶部和左侧位置（基于远离窗口边缘的位置）并抓取高度、宽度、顶部和左侧位置（基于父容器的边缘） ) 并比较这些值以确定伪元素在屏幕上的位置。

然后比较鼠标的位置。只要鼠标在新创建的变量范围内，它就会返回 true。

笔记：

使父元素相对定位是明智的。如果你有一个绝对定位的伪元素，这个函数只有在它基于父元素的尺寸定位时才有效（所以父元素必须是相对的......也许粘性或固定也可以工作......我不知道）。

代码：

function psuedoClick(parentElem) {

    var beforeClicked,
      afterClicked;

  var parentLeft = parseInt(parentElem.getBoundingClientRect().left, 10),
      parentTop = parseInt(parentElem.getBoundingClientRect().top, 10);

  var parentWidth = parseInt(window.getComputedStyle(parentElem).width, 10),
      parentHeight = parseInt(window.getComputedStyle(parentElem).height, 10);

  var before = window.getComputedStyle(parentElem, ':before');

  var beforeStart = parentLeft + (parseInt(before.getPropertyValue("left"), 10)),
      beforeEnd = beforeStart + parseInt(before.width, 10);

  var beforeYStart = parentTop + (parseInt(before.getPropertyValue("top"), 10)),
      beforeYEnd = beforeYStart + parseInt(before.height, 10);

  var after = window.getComputedStyle(parentElem, ':after');

  var afterStart = parentLeft + (parseInt(after.getPropertyValue("left"), 10)),
      afterEnd = afterStart + parseInt(after.width, 10);

  var afterYStart = parentTop + (parseInt(after.getPropertyValue("top"), 10)),
      afterYEnd = afterYStart + parseInt(after.height, 10);

  var mouseX = event.clientX,
      mouseY = event.clientY;

  beforeClicked = (mouseX >= beforeStart && mouseX <= beforeEnd && mouseY >= beforeYStart && mouseY <= beforeYEnd ? true : false);

  afterClicked = (mouseX >= afterStart && mouseX <= afterEnd && mouseY >= afterYStart && mouseY <= afterYEnd ? true : false);

  return {
    "before" : beforeClicked,
    "after"  : afterClicked

  };      

}

支持：

我不知道......它看起来像 ie 是愚蠢的，有时喜欢将 auto 作为计算值返回。如果尺寸在 CSS 中设置，它似乎在所有浏览器中都能正常工作。所以......在你的伪元素上设置你的高度和宽度，并且只在顶部和左侧移动它们。我建议将它用于您认为它不起作用的事情上。比如动画什么的。Chrome 工作......像往常一样。

我的答案适用于想要单击页面确定区域的任何人。这对我的绝对定位对我有用 :after

由于这个文章，我才意识到（用jQuery）我可以用e.pageY和e.pageX而不必担心e.offsetY/X与e.clientY/X浏览器之间的问题。

通过反复试验，我开始在 jQuery 事件对象中使用 clientX 和 clientY 鼠标坐标。这些坐标为我提供了鼠标相对于浏览器视口左上角的 X 和 Y 偏移量。然而，当我阅读 Karl Swedberg 和 Jonathan Chaffer 的 jQuery 1.4 参考指南时，我看到他们经常提到 pageX 和 pageY 坐标。查看更新的jQuery文档后，我看到这些是jQuery标准化的坐标；而且，我看到他们给了我鼠标相对于整个文档（不仅仅是视口）的 X 和 Y 偏移量。

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

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

这是我在 codepen 上的演示。

或者如果对 codepen 太懒了，这里是 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');
  }
});