Javascript js强制执行just:after或：before，但不能同时执行两者

我有一个简单的html滑块

 <div class="range-handle" style="left: 188.276px;">100,000</div>

这部分是有效的，因为无论单击哪个箭头，我都会执行这两个操作。首先在事件处理之前，然后在事件处理之后

记住以上代码后，如何根据箭头的位置强制执行一个事件 点击

---

如果没有骇人的解决方案，就无法侦听伪元素上的事件

最简单的解决方案是用额外的元素包装箭头：

<div class="range-arrow-left"></div>
<div class="range-handle"></div>
<div class="range-arrow-right"></div>

另一个解决方案将引入更多javascript：

const rangeHandle = document.querySelector('.range-handle')
const rangeArrowSize = 20

function determineArrow(e) {
  cons isLeft  = e.pageX < rangeArrowSize
  cons isRight = e.pageX > rangeHandle.offsetWidth - rangeArrowSize

  if (isLeft) leftArrow()
  else if (isRight) rightArrow()
}

rangeHandle.addEventListener('click', determineArrow)

const rangeHandle=document.querySelector（“.range handle”）
常数范围箭头大小=20
函数确定箭头（e）{
cons isLeft=e.pageX<范围箭头大小
cons isRight=e.pageX>rangeHandle.offsetWidth-rangeArrowSize
if（isLeft）leftArrow（）
else if（isRight）rightArrow（）
}
rangeHandle.addEventListener（'单击'，确定箭头）

---

未经测试

据我所知，伪元素之前和之后不在真实的dom中，但它们在阴影dom中。因此，我认为您的事件侦听器正在侦听“.range handle”元素，而不是伪元素，这就是调用这两个操作的原因。这只是我的观点，虽然不是很确定。使用“.range handle”元素而不是伪元素中的绝对位置的2个跨距，您可以达到您想要的效果。

const rangeHandle = document.querySelector('.range-handle')
const rangeArrowSize = 20

function determineArrow(e) {
  cons isLeft  = e.pageX < rangeArrowSize
  cons isRight = e.pageX > rangeHandle.offsetWidth - rangeArrowSize

  if (isLeft) leftArrow()
  else if (isRight) rightArrow()
}

rangeHandle.addEventListener('click', determineArrow)