Elementos dinâmicos, elementos estáticos, manipuladores de eventos e suas complexidades

Trabalhar com elementos empilhados em uma página, alguns que são âncoras e outros que são elementos com manipuladores de eventos, às vezes pode causar um comportamento estranho.

Em última análise, tudo tem a ver com a propagação de eventos, mas se você não teve que lidar com isso (ou eventos borbulhantes ou algo assim), pode ser um desafio.

E aqui está um exemplo: E se você tiver uma imagem envolvida em uma âncora. O que acontece quando você coloca um elemento dinâmico via JavaScript após o carregamento da página que carrega outro elemento dinâmico? Além disso, você deseja impedir que a página seja redirecionada quando o elemento dinâmico for clicado, mas ainda direto quando a imagem for clicada?

Pode parecer simples – e em alguns casos é – mas se você tiver um elemento transparente sobrepondo toda a imagem original, isso pode se tornar um outro desafio.

É aqui que a compreensão dos alvos de eventos entra em jogo. Mas antes de entrar em como resolvê-lo, tentarei destilar tudo em uma explicação mais simples e diagramar como é renderizado no DOM.

Elementos dinâmicos, elementos estáticos e manipuladores de eventos

Então tente imaginar isso: Você tem…

• Uma página que tem uma imagem e a imagem está envolta em uma âncora que o levará a, digamos, outra página.
• Quando a página é carregada, dois elementos dinâmicos são criados. Quando o primeiro é clicado, ele deve exibir o segundo elemento dinâmico.
• Quando a primeira dinâmica é clicada, ela não deve redirecionar a página.
• Quando a imagem original é clicada, ela deve se comportar conforme o esperado.

A parte difícil disso é que os elementos dinâmicos são colocados em cima da combinação de âncora e imagem existente.

Um olhar sobre o DOM

Isso significa que o DOM ficaria mais ou menos assim:

Observe na imagem acima que a âncora aciona a imagem e o elemento dinâmico aciona a sobreposição dinâmica.

Então, como vamos exibir o segundo elemento dinâmico quando o primeiro clicou sem sair da página? Você pode fazer isso examinando o destino do evento que foi acionado.

O Código para Tratamento de Eventos

Estarei usando jQuery abaixo, já que a maioria dos meus leitores trabalha com WordPress e WordPress vem com jQuery, mas isso também pode ser tratado com JavaScript vanilla (mas tentar seguir esse caminho é mais do que estou disposto a explicar neste particular publicar).

Com isso dito, aqui está a essência da qual vou explicar o que está acontecendo com o 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.
  });
});

Primeiro, estou assumindo que existem vários elementos dinâmicos, portanto, o motivo de cada iterador.

Em seguida, ele cria uma referência ao elemento âncora que é pai da instância atual do elemento dinâmico (usar var aqui é importante para que sempre se refira ao elemento que é o pai da instância atual da iteração versus substituir uma instância anterior ).

Quando o elemento é clicado, configuramos um manipulador de cliques para que possamos dar uma olhada no destino do evento do evento click. É aqui que fica um pouco confuso.

Temos variáveis ​​e e evt, cada uma das quais se refere ao manipulador de eventos para um elemento específico. No código acima:

• e refere-se ao evento vinculado ao nosso elemento dinâmico,
• evt se refere ao elemento, mas também afetará o processo de borbulhamento de eventos, o que significa que ele acionará eventos em todo o resto do DOM.

E assim, em nossa condicional, avaliamos o destino do primeiro manipulador de eventos para garantir que ele não corresponda ao elemento específico. A partir daí, como você pode ver no comentário do código, você pode determinar como deseja prosseguir (como talvez seguir em frente e deixá-lo navegar em outro lugar ou fazer outra coisa).

Em última análise, a decisão é sua. Mas quando você entra em um vínculo de elementos dinâmicos, elementos estáticos e manipuladores de eventos, pode ficar complicado rapidamente.