Haga clic en la detección de eventos en pseudo-elements

pregunta:

en el código proporcionado, un evento de clic se realiza en el bit de pseudo) y el elemento azul (el elemento azul). Sin embargo, el objetivo es detectar clics solo en el pseudoelemento. ¿Es esto posible?

Respuesta:

No, no es posible detectar eventos de clic en pseudo-elementos directamente porque no existen como parte del modelo de objeto de documento (DOM). Los pseudo-elementos son elementos virtuales que generan el navegador y no son parte de la estructura HTML real.

enfoque alternativo:

si necesita implementar un manejador de clic específicamente para la región roja, puede crear un elemento infantil, como un span:

&]

Lorem ipsum dolor sit amet, ...

  
  Lorem ipsum dolor sit amet, ...

Entonces, aplique estilos al elemento SPAN:

. Red-Bit { Posición: Absoluto; Izquierda: 100%; Ancho: 10px; Altura: 100%; Color de fondo: rojo; }

  
  Lorem ipsum dolor sit amet, ...

Finalmente, ata el controlador de clic al elemento SPAN:

document.queryselector (". // Haga clic en el código del controlador });

  
  Lorem ipsum dolor sit amet, ...

Este enfoque le permite capturar clics en la región roja mientras evita que los clics se activen en el elemento principal.