it-swarm.cn

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

我的代码是:

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

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

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

我想仅在伪元素(红色位)上触发click事件。也就是说,我不希望在蓝色位上触发click事件。

189
Randomblue

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

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

200
BoltClock

实际上,这是可能的。您可以检查单击的位置是否在元素之外,因为只有在单击::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

121
Linus Unnebäck

现代浏览器 您可以尝试使用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 tag以及以下样式:

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

60
Fasoeu

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

感谢 文章 ,我意识到(使用jQuery)我可以使用e.pageYe.pageX而不是担心浏览器之间的e.offsetY/Xe.clientY/X问题。

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

我喜欢这个event.pageY的想法,因为它总是相同的,因为它是 相对于文档 。我可以将它与my比较:在使用offset()的父元素之后,它还返回其相对于文档的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');
  }
});
7
amurrell

这对我有用:

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

简答: /

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

页面上显示的工作示例

记录到控制台的工作示例

答案: /

......还是做到了.

我花了一些时间来做这件事,因为页面上没有真正的伪元素。虽然上面的一些答案在某些情况下有效,但它们都不能同时处于动态状态,并且在元素大小和位置都是意外的情况下工作(例如绝对定位元素覆盖父元素的一部分)。我没有。

用法:

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

});

工作原理:

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

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

注意:

使父元素RELATIVE定位是明智的。如果你有一个绝对定位的psuedo元素,这个函数只有在基于父级的维度定位时才会起作用(所以父级必须是相对的......也许粘性或固定也会起作用....我不知道)。

代码:

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

  };      

}

支持:

我不知道....它看起来像是愚蠢的,有时喜欢将auto作为计算值返回。如果在CSS中设置了尺寸,那么它可以在所有浏览器中工作。所以...在你的伪元素上设置你的高度和宽度,只用顶部和左边移动它们。我推荐在你可以使用它的东西上使用它。像动画或其他东西。 Chrome像往常一样工作。

3
Aaron Loften

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

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

1
Abdennour TOUMI

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

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

显然这对于​​两种类型(之前和之后)都是不可行的,但是我已经将它实现为黑客/速度修复并且它运行良好,没有一堆位置检查,这可能是不准确的,这取决于大约一百万个不同的因素。

0
dudewad