Can You Detect Click Events on CSS Pseudo-Elements?

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:

<p>
  <span class="red-bit"></span>
  Lorem ipsum dolor sit amet, ...
</p>

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.

The above is the detailed content of Can You Detect Click Events on CSS Pseudo-Elements?. For more information, please follow other related articles on the PHP Chinese website!