Click Event Detection on Pseudo-Elements

Question:

In the provided code, a click event is triggered on both the pseudo-element (red bit) and the main element (blue bit). However, the goal is to detect clicks only on the pseudo-element. Is this possible?

Answer:

No, it is not possible to detect click events on pseudo-elements directly because they do not exist as part of the Document Object Model (DOM). Pseudo-elements are virtual elements that are generated by the browser and are not part of the actual HTML structure.

Alternative Approach:

If you need to implement a click handler specifically for the red region, you can create a child element, such as a span:

  
  Lorem ipsum dolor sit amet, ...

Then, apply styles to the span element:

.red-bit {
  position: absolute;
  left: 100%;
  width: 10px;
  height: 100%;
  background-color: red;
}

Finally, bind the click handler to the span element:

document.querySelector(".red-bit").addEventListener("click", function() {
  // Click handler code
});

This approach allows you to capture clicks on the red region while preventing clicks from being triggered on the main element.