Elementos dinámicos, elementos estáticos, controladores de eventos y sus complejidades

Trabajar con elementos apilados en una página, algunos que son anclas y otros que son elementos con controladores de eventos, a veces puede causar un comportamiento extraño.

En última instancia, todo tiene que ver con la propagación de eventos, pero si no ha tenido que lidiar con eso (o el burbujeo de eventos o algo así), puede ser un desafío.

Y aquí hay un ejemplo: ¿Qué sucede si tiene una imagen envuelta en un ancla? ¿Qué sucede cuando un elemento dinámico que se coloca a través de JavaScript después de que se carga la página carga otro elemento dinámico? Además de eso, ¿desea evitar que la página se redirija cuando se hace clic en el elemento dinámico pero aún así dirigir cuando se hace clic en la imagen?

Puede sonar simple, y en algunos casos lo es, pero si tiene un elemento transparente superpuesto a la imagen original completa, puede convertirse en un desafío completamente diferente.

Aquí es donde entra en juego la comprensión de los objetivos de los eventos. Pero antes de entrar en cómo resolverlo, intentaré resumir todo en una explicación más simple y diagramar cómo se representa en el DOM.

Elementos dinámicos, elementos estáticos y controladores de eventos

Así que trata de imaginar esto: Tienes…

• Una página que tiene una imagen y la imagen está envuelta en un ancla que te llevará, por ejemplo, a otra página.
• Cuando se carga la página, se crean dos elementos dinámicos. Cuando se hace clic en el primero, debería mostrar el segundo elemento dinámico.
• Cuando se hace clic en la primera dinámica, no debería redirigir la página.
• Cuando se hace clic en la imagen original, debería comportarse como se esperaba.

La parte difícil de esto es que los elementos dinámicos se colocan encima de la combinación existente de ancla e imagen.

Una mirada al DOM

Esto significa que el DOM se vería así:

Observe en la imagen de arriba que el ancla activa la imagen y el elemento dinámico activa la superposición dinámica.

Entonces, ¿cómo hacemos para mostrar el segundo elemento dinámico cuando se hace clic en el primero sin salir de la página? Puede hacer esto examinando el objetivo del evento que se activó.

El código para el manejo de eventos

Usaré jQuery a continuación, ya que la mayoría de mis lectores trabajan con WordPress y WordPress se envía con jQuery, pero esto también se puede manejar con JavaScript estándar (pero tratar de seguir ese camino es más de lo que estoy dispuesto a explicar en este particular correo).

Dicho esto, aquí está la esencia de la cual explicaré lo que está pasando con el código:

$('.acme-element').each(function(e) { 
  var $anchor = $(this).parents('a');
  $(this).on('click', function(evt) {
    if(e.target !== this) {
      evt.preventDefault();
    }
    // Here, you may want to action to redirect to an original anchor.
  });
});

Primero, asumo que hay múltiples elementos dinámicos, de ahí el motivo de cada iterador.

A continuación, crea una referencia al elemento de anclaje que es el padre de la instancia actual del elemento dinámico (usar var aquí es importante para que siempre se refiera al elemento que es el padre de la instancia actual de la iteración en lugar de sobrescribir una instancia anterior ).

Cuando se hace clic en el elemento, configuramos un controlador de clics para que podamos ver el objetivo del evento del clic. Aquí es donde se vuelve un poco confuso.

Tenemos variables e y evt, cada una de las cuales se refiere al controlador de eventos para un elemento específico. En el código de arriba:

• e se refiere al evento ligado a nuestro elemento dinámico,
• evt se refiere al elemento, pero también afectará el proceso de generación de eventos, lo que significa que activará eventos en el resto del DOM.

Y así, en nuestro condicional, evaluamos el objetivo del primer controlador de eventos para asegurarnos de que no coincida con el elemento específico. A partir de ahí, como puede ver en el comentario del código, puede determinar cómo desea proceder (tal vez seguir adelante y dejar que navegue a otro lugar o haga otra cosa).

En última instancia, es su llamada. Pero cuando se encuentra en un aprieto de elementos dinámicos, elementos estáticos y controladores de eventos, puede complicarse rápidamente.