1

¡Saludos!

Estoy trabajando en la modificación de un código de una aplicación para diseñar fundas para teléfonos. Necesito detectar cuando un menú aparece en la pantalla y poder tomar acciones sobre él.

El panel que necesito ubicar se ve de esta forma en el HTML antes de aparecer (aparece haciendo clic sobre el elemento de texto agregado en el canvas).

introducir la descripción de la imagen aquí

Una vez que se hace clic sobre el texto aparece el panel de opciones, se activan los elementos y al div padre se le agrega la clase .fpd-show.

introducir la descripción de la imagen aquí

Ahora bien, quiero detectar la aparición del panel para desplazarlo hacia la derecha y luego hacia la izquierda de nuevo, para que los usuarios se den cuenta de que hay más opciones (se trata de la vista para móviles) y que esto ocurra una sola vez.

He intentado con lo siguiente:

let elementoScrollHorizontal = document.getElementsByClassName('fpd-scroll-area');

elementoScrollHorizontal.addEventListener('show', () => {
  // Aquí el código para mover el scroll
})

Pero no funciona y asumo que es porque al momento de cargar la página el elemento que tiene la clase .fpd-scroll-área aún no es visible y me arroja el error de que el Listener no es una función porque elementoScrollHorizontal regresa null. Y sé que probablemente el evento 'show' no sea el adecuado, pero es que ni se llega a ejecutar esa línea porque, como dije, la variable que almacena el objeto regresa null.

En el pasado resolví esto con un método setTimeout, agregango unos elementos adicionales al código de la página y algo de jquery (como en el código) pero, además de que quiero hacerlo con JS puro, esa manera en la que lo hice no es práctica porque se basa en un tiempo fijo que puede variar según la rapidez del dispositivo que el usuario utilice.

jQuery(document).ready(function(){
    jQuery('body').on('click', '#cdm-aux-1', function(){
        setTimeout(function(){
          jQuery('#cdm-aux-0').animate({scrollLeft: '190' }, 1000);
          jQuery('#cdm-aux-0').animate({scrollLeft: '0' }, 1000);
        }, 1900);
    });
});

Gracias de antemano por el apoyo.

7
  • Fíjate que getElementsByClassName retorna un arreglo de objetos, no solo uno Commented el 23 abr. 2022 a las 19:25
  • Si, me faltó mencionar eso en el código sería algo así?: elementoScrollHorizontal[19].addEventListener('click', () => { alert('Hola mundo'); }) Ya que el elemento que quiero seleccionar es el de indice 19 del arreglo. Commented el 23 abr. 2022 a las 20:22
  • Eso funciona pero me parecería mejor ponerle una ID a ese elemento y usar getElementById Commented el 23 abr. 2022 a las 20:30
  • Ah y una posible solución para el problema de que el elemento no existe podría ser poner el javascript en un bloque <script> al final del body Commented el 23 abr. 2022 a las 20:32
  • Ya probé colocando un id al elemento y el <script> al final del body y sigo recibiendo null. let elementoScrollHorizontal = document.getElementById('temporal'); console.log(elementoScrollHorizontal); // Esto me devuelve null en la consola. Si lo ingreso manualmente luego de cargar la página, si me devuelve el elemento. elementoScrollHorizontal.addEventListener('mouseover', () => { jQuery(elementoScrollHorizontal).animate({scrollLeft: '1000' }, 1000); jQuery(elementoScrollHorizontal).animate({scrollLeft: '0' }, 1000); }) Commented el 23 abr. 2022 a las 21:44

2 respuestas 2

1

Cuando el contenido es generado dinámicamente puedes usar la delegación de eventos desde un elemento superior jerárquicamente que ya estuviera antes, pues todos los eventos son pasados desde el elemento que lo recibe hasta el elemento superior a todos, pasando por todos los elementos intermedios.

Es decir, y para estar seguros que eso va a funcionar, mejor que uses un id para ese elemento generado dinámicamente, tal como ya te han comentado, y desde un elemento no dinámico que ya esté cargado previamente recojas ese evento y mediante un condicional filtres desde que elemento está invocado y si es el deseado ejecutes el código que quieras para el.

En código todo eso se podria traducir como:

body.addEventListener('mouseover', () => {
  if(event.target.id == "temporal") {
    jQuery(elementoScrollHorizontal).animate({scrollLeft: '1000' }, 1000);
    jQuery(elementoScrollHorizontal).animate({scrollLeft: '0' }, 1000);
  }
})

donde el id "temporal" lo has preestablecido para el elemento que deseas que ejecute ese código bajo ese evento.

Dicho de otro modo, en este caso, cuando hay un evento mouseover y este llega al elemento body se ejecuta ese condicional, usando event.target que nos va a apuntar al elemento que ha lanzado ese evento, y gracias a eso podemos verificar si su id es el esperado (temporal en este caso) y ejecutar el código deseado para el.

3
  • primero que nada, gracias por la respuesta, la solución si va por la delegación de eventos. Ahora bien, ejecutando la solución, me encuentro con dos problemas. Primero, esto debe funcionar es en dispositivos móviles o de pantalla pequeña, que es donde los elementos se desbordan, por lo que los eventos 'mouse' no sirven. Probé con eventos tipo 'touchstart' pero no funcionó. Y de esta lista enlace no hay algún otro que sirva para pantallas táctiles. Commented el 25 abr. 2022 a las 0:07
  • el segundo problema, es que el elemento que quiero mover tiene otro elemento encima, por lo que el acceso al primero tuve que hacerlo desde ese segundo elemento (esto se solucionó). Y perdón, fueron tres problemas, porque también es necesario que este movimiento ocurra una sola vez, ya que no tiene sentido que al mismo usuario se le muestre esto cada vez que aparece el menú. Es por esto que pienso que el evento debería desencadenarse al momento de aparecer el panel, pero el evento 'show' no me funciona. Dejaré cómo va el código en una actualización de la pregunta. Commented el 25 abr. 2022 a las 0:16
  • Eso que has hecho es una nueva pregunta. Mi respuesta, tal como has dicho en estos comentarios y en tu pregunta, es válida para la pregunta inicial. Si vas cambiando la pregunta podria darse el caso que irás obteniendo distintas respuestas conforme aportes nuevos escenarios, y así no funciona este sitio. Léete Cómo preguntar para aprender a realizar mejor las preguntas, las cuales deben centrarse en un solo problema cada vez. No voy a intentar darte nuevas respuestas sobre tu nueva problemática en esta pregunta y tu deberias revertir tu actualización de esta pregunta y hacer otra nueva.
    – masterguru
    Commented el 25 abr. 2022 a las 1:40
0

Al final la solución quedó de la siguiente manera:

let body = document.getElementsByTagName('body');
body[0].addEventListener('click', mover);

function mover(evento){
  let canva = document.getElementsByClassName('upper-canvas ');
  canva[0].id = 'canvas';
  let scrollArea = document.getElementsByClassName('fpd-scroll-area');
  scrollArea[19].id = 'scrollArea';
  if(evento.target.id == "canvas"){
    jQuery('#scrollArea').animate({scrollLeft: '500' }, 1500);
    jQuery('#scrollArea').animate({scrollLeft: '0' }, 1500);
  }
}

Al hacer click sobre cualquier parte de la pantalla se ejecuta la función que le asigna id primeramente al elemento en la capa superior (upper-canvas) y luego al panel que quiero desplazar (fpd-scroll-area), para acceder a ellos más fácilmente. Luego si el evento coincide con el canvas, se ejecuta la animación en el panel.

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.