只检测伪元素上的点击事件

我的代码是:

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/

我只想在伪元素(红色位)上触发一个点击事件。 也就是说,我不希望在蓝色位上触发点击事件。

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

如果你只需要在红色区域有一个点击处理程序,你必须把一个子元素,比如一个span ,放在开始的<p>标记之后,将样式应用到p span而不是p:before ,然后绑定到它。

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

这小提琴只检查元素的权利,但这应该在你的情况下工作。

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

现代浏览器上,您可以尝试使用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; } 

事件目标现在既是“跨度”又是“之前”元素。

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

jQuery的例子: http : //jsfiddle.net/0vygmnnb/

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

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

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

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

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

因此,我可以在整个页面上创build一个“可点击”区域范围,从不改变。


这是我的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'); } }); 

在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

这适用于我:

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

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

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

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

不,但你可以这样做

在html文件中添加此部分

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

在CSS中,你可以这样做

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

希望它会帮助你