Trabajar con elementos apilados en una p\u00e1gina, algunos que son anclas y otros que son elementos con controladores de eventos, a veces puede causar un comportamiento extra\u00f1o.<\/p>\n
En \u00faltima instancia, todo tiene que ver con la propagaci\u00f3n de eventos, pero si no ha tenido que lidiar con eso (o el burbujeo de eventos o algo as\u00ed), puede ser un desaf\u00edo.<\/p>\n
Y aqu\u00ed hay un ejemplo: \u00bfQu\u00e9 sucede si tiene una imagen envuelta en un ancla? \u00bfQu\u00e9 sucede cuando un elemento din\u00e1mico que se coloca a trav\u00e9s de JavaScript despu\u00e9s de que se carga la p\u00e1gina carga otro elemento din\u00e1mico? Adem\u00e1s de eso, \u00bfdesea evitar que la p\u00e1gina se redirija cuando se hace clic en el elemento din\u00e1mico pero a\u00fan as\u00ed dirigir cuando se hace clic en la imagen?<\/p>\n
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\u00edo completamente diferente.<\/p>\n
Aqu\u00ed es donde entra en juego la comprensi\u00f3n de los objetivos de los eventos. Pero antes de entrar en c\u00f3mo resolverlo, intentar\u00e9 resumir todo en una explicaci\u00f3n m\u00e1s simple y diagramar c\u00f3mo se representa en el DOM.<\/p>\n
As\u00ed que trata de imaginar esto: Tienes…<\/p>\n
La parte dif\u00edcil de esto es que los elementos din\u00e1micos se colocan encima de la combinaci\u00f3n existente de ancla e imagen.<\/p>\n
Esto significa que el DOM se ver\u00eda as\u00ed:<\/p>\n
Observe en la imagen de arriba que el ancla<\/strong> activa la imagen<\/strong> y el elemento din\u00e1mico<\/strong> activa la superposici\u00f3n din\u00e1mica<\/strong>.<\/p>\n Entonces, \u00bfc\u00f3mo hacemos para mostrar el segundo elemento din\u00e1mico cuando se hace clic en el primero sin salir de la p\u00e1gina? Puede hacer esto examinando el objetivo del evento que se activ\u00f3.<\/p>\n Usar\u00e9 jQuery a continuaci\u00f3n, ya que la mayor\u00eda de mis lectores trabajan con WordPress y WordPress se env\u00eda con jQuery, pero esto tambi\u00e9n se puede manejar con JavaScript est\u00e1ndar (pero tratar de seguir ese camino es m\u00e1s de lo que estoy dispuesto a explicar en este particular correo).<\/p>\n Dicho esto, aqu\u00ed est\u00e1 la esencia de la cual explicar\u00e9 lo que est\u00e1 pasando con el c\u00f3digo:<\/a><\/strong><\/p>\n Primero, asumo que hay m\u00faltiples elementos din\u00e1micos, de ah\u00ed el motivo de cada<\/a> iterador.<\/p>\nEl c\u00f3digo para el manejo de eventos<\/h3>\n
$('.acme-element').each(function(e) { \n var $anchor = $(this).parents('a');\n $(this).on('click', function(evt) {\n if(e.target !== this) {\n evt.preventDefault();\n }\n \/\/ Here, you may want to action to redirect to an original anchor.\n });\n});<\/code><\/pre>\n