1

Tengo este codigo en react, y espero que al pasar el mouse sobre una seccion, se ejecute la funcion onMouseOver que le paso por props al componente. Esta funcion solo imprime un console.log del e.target. La cosa es que si yo paso el mouse sobre la seccion, correctamente veo <section id="amenities"... />, pero si paso el mouse sobre algun elemento interno de esta section, ahora se consolea el elemento interno. Hay alguna forma de SIEMPRE obtener como e.target el section en lugar de sus elementos internos?

<section
  className="resort-amenities"
  id="amenities"
  onMouseEnter={onMouseOver}
 >
  <h2 className="title">Amenities</h2>
  <div className="amenities-wrapper">
    {renderAmenities}
  </div>
</section>

1 respuesta 1

2

PROBLEMA

El problema es que estás usando e.target:

...que identifica el elemento en el que se produjo el evento.

De esta forma, al pasar el mouse sobre cualquier elemento dentro de tu <section> se delega el evento del padre a los hijos.

SOLUCIÓN

La solución es utilizar e.currentTarget que:

Siempre hace referencia al elmento al cual el controlador del evento fue asociado...

Es decir, aunque el evento de pasar el mouse sobre tu elemento <section> ocurra sobre cualquier hijo del mismo, currentTarget siempre será el padre, es decir tu elemento <section>.

Espero que esto te ayude a resolver el problema.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.