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

这个例子只检查右边的元素，但这在您的例子中是可行的。

span = document.querySelector('span'); 跨度。addEventListener('点击'，函数(e) { if (e.offsetX > span.offsetWidth) { 跨度。className = 'c2'; }其他{ 跨度。className = 'c1'; ｝ })； Div{边距:20px;｝ span:after{内容:' after ';位置:绝对的;｝ 跨度。C1{背景:黄色;｝ 跨度。C2:后面{背景:黄色;｝ < div > < span >元素< / span > < / div >

JSFiddle

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

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

这对我来说很管用:

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

简短的回答:

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

显示在页面上的工作示例

将日志记录到控制台的工作示例

长一点的回答:

.．.还是做到了。

这花了我一段时间来做，因为伪元素不是真的在页面上。虽然上面的一些答案在某些场景中是有效的，但它们都不是动态的，并且在元素的大小和位置都是意外的场景中都有效(例如绝对定位的元素覆盖了父元素的一部分)。我的则不然。

用法:

//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的作品……像往常一样。

不，但你可以这样做

在html文件中添加此部分

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

在css中你可以这样做

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

希望对你有所帮助

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

    $('#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