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

javascript jquery css

2022-08-30 00:26:17

我的代码是：

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

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

    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate...</p>

我想只在伪元素（红色位）上触发点击事件。也就是说，我不希望在蓝色位上触发单击事件。

答案 1

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

如果必须仅在红色区域上具有单击处理程序，则必须创建一个子元素（如），将其放在开始标记的正后位置，将样式应用于而不是，然后绑定到它。span<p>p spanp:before

答案 2

实际上，这是可能的。您可以检查单击的位置是否位于元素之外，因为只有在单击或被单击时才会发生这种情况。::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