仅检测伪元素上的单击事件

My code is:

我的代码是:

p {
    position: relative;
    background-color: blue;
}

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

Please see this fiddle: http://jsfiddle.net/ZWw3Z/5/

请查看这个小提琴:http://jsfiddle.net/ZWw3Z/5/

I would like to trigger a click event only on the pseudo-element (the red bit). That is, I don't want the click event to be triggered on the blue bit.

我只希望在伪元素(红色位)上触发单击事件。也就是说，我不希望在蓝色位上触发click事件。

9 个解决方案

#1

This is not possible; pseudo-elements are not part of the DOM at all so you can't bind any events directly to them, you can only bind to their parent elements.

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

If you must have a click handler on the red region only, you have to make a child element, like a span, place it right after the opening <p> tag, apply styles to p span instead of p:before, and bind to it.

如果您必须在红色区域上只有一个单击处理程序，那么您必须创建一个子元素，比如span，将它放在开头

标记之后，将样式应用到p span而不是p:before，并绑定到它。

#2

Actually, it is possible. You can check if the clicked position was outside of the element, since this will only happen if ::before or ::after was clicked.

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

This fiddle only checks the element to the right but that should work in your case.

这个提琴只检查元素的右边，但那应该在你的情况下工作。

http://jsfiddle.net/wC2p7/1/

http://jsfiddle.net/wC2p7/1/

#3

On modern browsers you can try with the pointer-events css property (but it leads to the impossibility to detect mouse events on the parent node):

在现代浏览器中，您可以尝试使用指针事件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;
}

When the event target is your "p" element, you know it is your "p:before".

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

If you still need to detect mouse events on the main p, you may consider the possibility to modify your HTML structure. You can add a span tag and the following style:

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

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

The event targets are now both the "span" and the "p:before" elements.

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

Example without jquery: http://jsfiddle.net/2nsptvcu/

没有jquery示例:http://jsfiddle.net/2nsptvcu/

Example with jquery: http://jsfiddle.net/0vygmnnb/

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

Here is the list of browsers supporting pointer-events: http://caniuse.com/#feat=pointer-events

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

#4

My answer will work for anyone wanting to click a definitive area of the page. This worked for me on my absolutely-positioned :after

我的答案将适用于任何想要点击页面的确定区域的人。这在我的绝对定位上起了作用:之后。

Thanks to this article, I realized (with jQuery) I can use e.pageY and e.pageX instead of worrying about e.offsetY/X and e.clientY/X issue between browsers.

多亏了这篇文章，我意识到(使用jQuery)我可以使用e。pageY和e。pageX而不用担心e。offsetY / X和e。clientY / 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).

通过我的尝试和错误，我开始在jQuery事件对象中使用clientX和clientY鼠标坐标。这些坐标给出了鼠标相对于浏览器视图端口左上角的X和Y偏移量。然而，当我阅读Karl Swedberg和Jonathan Chaffer的jQuery 1.4参考指南时，我发现他们经常提到pageX和pageY坐标。检查了更新的jQuery文档后，我发现这些是jQuery标准化的坐标;我看到他们给了我鼠标相对于整个文档的X和Y偏移量(不仅仅是视图端口)

I liked this event.pageY idea because it would always be the same, as it was relative to the document. I can compare it to my :after's parent element using offset(), which returns its X and Y also relative to the document.

我喜欢这个事件。佩吉的想法，因为它总是一样的，因为它是相对于文档的。我可以将其与my:after的父元素使用offset()进行比较，后者返回其X和Y相对于文档。

Therefore, I can come up with a range of "clickable" region on the entire page that never changes.

因此，我可以在整个页面上找到一个“可点击”区域的范围，这个区域不会改变。

---

Here's my demo on codepen.

这是我在codepen上的演示。

---

or if too lazy for codepen, here's the JS:

如果对代码页来说太懒了，这里是JS:

* I only cared about the Y values for my example.

我只关心我的例子的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');
  }
});

#5

This works for me:

这工作对我来说:

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

#6

Add condition in Click event to restrict the clickable area .

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

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

#7

Short Answer:

简短的回答:

I did it. I even did it in pure javascript and wrote a function for dynamic usage for all the little people out there...

我做到了。我甚至用纯javascript编写了一个函数为所有的小用户提供动态使用…

Working example with function that you can steal

可以偷取的函数的工作示例

Long Answer:

长一点的回答:

...Still did it.

…还是做到了。

It took me awhile to do it, since a psuedo element is not really on the page. While some of the answers above work in SOME scenarios, they ALL fail to be both dynamic and work in a scenario in which an element is both unexpected in size and position(such as absolute positioned elements overlaying a portion of the parent element). Mine does not.

我花了一段时间才完成，因为psuedo元素并没有真正出现在页面上。虽然上面的一些答案在某些场景中是有效的，但是它们都不是动态的，并且在元素的大小和位置(例如覆盖父元素的绝对位置元素)都是不可预料的的的场景中是有效的。我没有。

Usage:

用法:

//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;

});

How it works:

它是如何工作的:

It grabs the height, width, top, and left positions(based on the position away from the edge of the window) of the parent element and grabs the height, width, top, and left positions(based on the edge of the parent container) and compares those values to determine where the psuedo element is on the screen.

它抓住高度、宽度、顶部和左位置(基于位置远离窗口的边缘)的父元素,抓住高度,宽度,顶部,离开职位(基于父容器的边缘)和比较这些值来确定推出的伪元素在屏幕上。

It then compares where the mouse is. As long as the mouse is in the newly created variable range then it returns true.

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

Note:

注意:

It is wise to make the parent element RELATIVE positioned. If you have an absolute positioned psuedo element, this function will only work if it is positioned based on the parent's dimensions(so the parent has to be relative...maybe sticky or fixed would work too....I dont know).

将父元素相对放置是明智的。如果您有一个绝对定位的psuedo元素，这个函数只能在基于父维度的位置上工作(因此父元素必须是相对的……)也许粘性或固定工作太....我不知道)。

Code:

代码:

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

  };      

}

Support:

支持:

I dont know....it looks like ie is dumb and likes to return auto as a computed value sometimes. IT SEEMS TO WORK WELL IN ALL BROWSERS IF DIMENSIONS ARE SET IN CSS. So...set your height and width on your psuedo elements and only move them with top and left. I recommend using it on things that you are okay with it not working on. Like an animation or something. Chrome works...as usual.

我不知道....看起来ie很笨，有时喜欢返回auto作为计算值。如果在CSS中设置维度，那么在所有浏览器中都能正常工作。所以…在psuedo元素上设置高度和宽度，只上下移动。我建议把它用在那些你不介意的事情上。比如动画什么的。Chrome的作品……像往常一样。

#8

None of these answers are reliable, and mine wont be much more reliable.

这些答案都不可靠，而我的答案也不会更可靠。

Caveats aside, if you do get into the lucky scenario where the element you're trying to have clicked doesn't have padding (such that all of the "inner" space of the element is completely covered by sub-elements), then you can check the target of the click event against the container itself. If it matches, that means you've clicked a :before or :after element.

除了注意事项之外，如果您遇到一个幸运的场景，您试图单击的元素没有填充(这样，元素的所有“内部”空间都被子元素完全覆盖)，那么您可以针对容器本身检查单击事件的目标。如果匹配，则表示您已经单击了a:before或:after元素。

Obviously this would not be feasible with both types (before and after) however I have implemented it as a hack/speed fix and it is working very well, without a bunch of position checking, which may be inaccurate depending on about a million different factors.

显然，对于这两种类型(之前和之后)来说，这都是不可行的，但是我已经将它作为hack/speed fix实现了，它运行得非常好，没有进行大量的位置检查，这可能是不准确的，这取决于大约一百万个不同的因素。

#9

No,but you can do like this

不，但你可以这样做。

In html file add this section

在html文件中添加此部分

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

In css you can do like this

在css中，你可以这样做

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

} Hope it will help you

希望这对你有帮助