简短的回答:

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

显示在页面上的工作示例

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

长一点的回答:

.．.还是做到了。

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

用法:

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

这些答案都不可靠，我的答案也不可靠得多。

除了注意事项外，如果您确实遇到了这样一种幸运的情况，即您试图单击的元素没有填充(这样元素的所有“内部”空间都被子元素完全覆盖)，那么您可以根据容器本身检查click事件的目标。如果匹配，这意味着您单击了:before或:after元素。

显然，这两种类型(之前和之后)都不可行，但我已经实现了它作为一个hack/速度修复，它工作得很好，没有一堆位置检查，这可能是不准确的，取决于大约一百万个不同的因素。

在现代浏览器中，您可以尝试使用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

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

多亏了这篇文章，我意识到(使用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');
  }
});

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

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

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