0

hola necesito ayuda con un problema que tengo, estaba buscando la forma de obtener el contenedor principal al usar el evento "onmouseover", para poder agregarle una clase al posicionar el mouse.

El tema surge que cuando hago el posicionamiento, en vez de tomarme el contenedor principal que es el div, me toma los elementos hijos que se encuentran adentro.

Quise usar "parentNode" pero algunos elementos estan dentro de otros div.

                <div onClick={enfocar} className='contenedor'>
                    <img src={imagenes.apex} alt="" />
                    <div className='tarjeta-cuerpo'>
                        <div>
                            <button aria-label='btn-play'>Play</button>
                            <span className='card-reproducir'> Reproducir </span>
                            <button aria-label='btn-agregar'>Agregar</button>
                            <button aria-label='btn-mas'>Mas</button>
                        </div>
                        <div>
                            <span className='card-titulo'> Titulo </span>
                            <span className='card-ano'> Año </span>
                            <span className='card-duracion'> 00:00:00 </span>
                            <span className='card-edad'> +18 </span>
                        </div>
                        <div>
                            <p className='card-desc'>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Sed, suscipit.</p>
                        </div>
                    </div>
                </div>

y lo siguiente seria la funcion que estaba tratando de obtener el valor

const enfocar = (e) =>{
    console.log(e.target);
}

1 respuesta 1

2

Estaría bien ver más código para darte una respuesta mas concreta. Así por encima, podrías agregarle un id a cada elemento y pasarselo como parametro a la funcion enfocar para luego en dicha funcion recuperar el elemento por id.

<div id=`elemento${index}` onmouseover={(e) => enfocar(e, `elemento${index}`)} className='contenedor'>

He usado el index porque me imagino que renderizas los elementos con un map, si no es así tendrías que poner un id en funcion de lo que sea, teniendo en cuenta que tienen que ser distintos todos.

Luego en la funcion enfocar:

const enfocar = (e, id) =>{
    const elemento = document.getElementById(id);
    if(elemento) elemento.classList.Add("la_clase_que_sea");
    console.log(elemento);
}

Tienes que tener en cuenta también que tendrías que usar el evento onmouseout o no me acuerdo como se llama para controlar cuando pierde el foco y eliminar la clase que añadiste al enfocar.

Otra opcion sería en la funcion enfocar, hacer un while hasta que el elemento padre tenga la clase contenedor.

const enfocar = (e) =>{
    let contiene = false;
    let elemento = e.target;
    do{
       if(elemento.classList.contains("contendor")) contiene = true;
       else elemento = e.target.parentNode;
    }
    while (!contiene)
    console.log(elemento);

    elemento.classList.add("la_clase_que_sea");
}

Esta opcion, en teoría no debería, pero habería que comprobar si podrías caer en un bucle infinito...

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.