In JavaScript, you can ensure that only either :after or :before is executed, but not both

Question

In JavaScript, you can ensure that only either :after or :before is executed, but not both

My html slider is causing me some trouble

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

Upon loading the page, I noticed that in Firebug it appears like this https://i.sstatic.net/Rgqvo.png

On the actual page, it looks like < 100,000 >

I am trying to capture when users click on either arrow (left or right).

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

This method works partially, as both actions are always executed regardless of which arrow is clicked. The before event is handled first followed by the after event.

Given the code above, how can I ensure only one event is executed depending on which arrow is clicked?

javascript css

Answer 1

Answer №1

It is not possible to listen for events on pseudo elements without resorting to hacky solutions...

An easy fix would involve wrapping your arrows in additional elements:

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

Alternatively, you could use a more complex approach that involves some javascript:

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

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

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

rangeHandle.addEventListener('click', determineArrow)

Not tested!

Answer 2

It is not possible to listen for events on pseudo elements without resorting to hacky solutions...

An easy fix would involve wrapping your arrows in additional elements:

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

Alternatively, you could use a more complex approach that involves some javascript:

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

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

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

rangeHandle.addEventListener('click', determineArrow)

Not tested!

In JavaScript, you can ensure that only either :after or :before is executed, but not both

Answer №1

Similar questions

Can you guide me on how to programmatically set an option in an Angular 5 Material Select dropdown (mat-select) using typescript code?

Using CSS :hover for elements with dual classes only

Alternating CSS Designs for Displaying Multiple Mysql Query Results

Grid element not displaying properly as intended

Encountering issues with accessing properties of undefined while chaining methods

Encountering a malfunction while executing an npm command specified in the package.json file

Subpar resolution of PNG images displayed in HTML canvas

Using CSS to design a table-like structure with rows that span multiple columns

Circular CSS menu

Converting Greek text to UTF-8 using Javascript

The functionality of JSON.stringify does not take into account object properties

Personalize the hover effect of CardActionArea

After clicking the create button in AngularJS, the ngModel values become empty

Automatically fill in checkboxes based on user input

I am interested in creating an input range slider using React and TypeScript

Searching for the closest jQuery value associated with a label input

Having issues with the <ul> tag not displaying correctly

Tips for extracting a website's dynamic HTML content after AJAX modifications using Perl and Selenium

How can I update the chartjs instance?

How float elements can affect z-index through opacity