只检测伪元素上的点击事件
我的代码是：
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被点击的时候发生。
这小提琴只检查元素的权利，但这应该在你的情况下工作。
在现代浏览器上，您可以尝试使用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.pageY和e.pageX而不用担心浏览器之间的e.offsetY/X和e.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;
希望它会帮助你
