javascript - js强制执行:after or :before but not both

Question

我有一个简单的 html slider

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

当页面加载时，我可以在 Firebug 中看到这样的代码

在页面上看起来像< 100,000 >

我想拦截用户点击两个箭头(向左和向右)。

 document.querySelector('.range-handle', ':before').addEventListener('click', leftArrow)
 document.querySelector('.range-handle', ':after').addEventListener('click', rightArrow)

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

Having above code in mind how can force executing just one event depending which arrow is clicked?

Answer 1

如果没有 hacky 解决方案，就无法监听伪元素上的事件......

最简单的解决方案是将您的箭头包裹在额外的元素中:

<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)

未经测试!