Trabalhar com elementos empilhados em uma p\u00e1gina, alguns que s\u00e3o \u00e2ncoras e outros que s\u00e3o elementos com manipuladores de eventos, \u00e0s vezes pode causar um comportamento estranho.<\/p>\n
Em \u00faltima an\u00e1lise, tudo tem a ver com a propaga\u00e7\u00e3o de eventos, mas se voc\u00ea n\u00e3o teve que lidar com isso (ou eventos borbulhantes ou algo assim), pode ser um desafio.<\/p>\n
E aqui est\u00e1 um exemplo: E se voc\u00ea tiver uma imagem envolvida em uma \u00e2ncora. O que acontece quando voc\u00ea coloca um elemento din\u00e2mico via JavaScript ap\u00f3s o carregamento da p\u00e1gina que carrega outro elemento din\u00e2mico? Al\u00e9m disso, voc\u00ea deseja impedir que a p\u00e1gina seja redirecionada quando o elemento din\u00e2mico for clicado, mas ainda direto quando a imagem for clicada?<\/p>\n
Pode parecer simples \u2013 e em alguns casos \u00e9 \u2013 mas se voc\u00ea tiver um elemento transparente sobrepondo toda a imagem original, isso pode se tornar um outro desafio.<\/p>\n
\u00c9 aqui que a compreens\u00e3o dos alvos de eventos entra em jogo. Mas antes de entrar em como resolv\u00ea-lo, tentarei destilar tudo em uma explica\u00e7\u00e3o mais simples e diagramar como \u00e9 renderizado no DOM.<\/p>\n
Ent\u00e3o tente imaginar isso: Voc\u00ea tem\u2026<\/p>\n
A parte dif\u00edcil disso \u00e9 que os elementos din\u00e2micos s\u00e3o colocados em cima da combina\u00e7\u00e3o de \u00e2ncora e imagem existente.<\/p>\n
Isso significa que o DOM ficaria mais ou menos assim:<\/p>\n
Observe na imagem acima que a \u00e2ncora<\/strong> aciona a imagem<\/strong> e o elemento din\u00e2mico<\/strong> aciona a sobreposi\u00e7\u00e3o din\u00e2mica<\/strong>.<\/p>\n Ent\u00e3o, como vamos exibir o segundo elemento din\u00e2mico quando o primeiro clicou sem sair da p\u00e1gina? Voc\u00ea pode fazer isso examinando o destino do evento que foi acionado.<\/p>\n Estarei usando jQuery abaixo, j\u00e1 que a maioria dos meus leitores trabalha com WordPress e WordPress vem com jQuery, mas isso tamb\u00e9m pode ser tratado com JavaScript vanilla (mas tentar seguir esse caminho \u00e9 mais do que estou disposto a explicar neste particular publicar).<\/p>\n Com isso dito, aqui est\u00e1 a ess\u00eancia da qual vou explicar o que est\u00e1 acontecendo com o c\u00f3digo:<\/a><\/strong><\/p>\n Primeiro, estou assumindo que existem v\u00e1rios elementos din\u00e2micos, portanto, o motivo de cada<\/a> iterador.<\/p>\nO C\u00f3digo para Tratamento 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