Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Menu responsivo - Exercício Opcional

Boa tarde, galera. Seguinte nessa parte da aula tem a informação que vou colar abaixo, mas é que não entendi direito, então se eu não colocar o código dentro do if, se eu clicasse no menu como ele sendo filho do hmtl, o menu também fecharia. Porém senão coloco o if, o menu nem funciona, seria porque ao clicar no menu abrir e mesmo ele criando a classe menu-ativo no meu html a outra função já estaria removendo esta classe em sequência, fazendo com que o menu nem apareça?

Segue descrição da aula:

Um ponto interessante a se observar é como pegar eventos no pseudo-elemento. Como pseudo-elementos são coisas de CSS, eles não podem ser selecionados no JavaScript para colocar um evento de clique. A solução é colocar o evento no elemento pai (no caso, no

, acessado via document.documentElement). Todo clique no pseudo-elemento vai disparar em seu respectivo pai. Mas é importante lembrar dos mecanismos de propagação de eventos do JS. Escutar cliques no vai pegar todos os cliques na página, mesmo os do menu e outros elementos (afinal tudo é descendente de ). Para evitar isso, adicionamos o if que filtra a ação para executar apenas se o elemento clicado (target) for exatamente o e não algum filho interno, como menu.
1 resposta
solução!

Olá Cleiton,

A ideia é apenas que, como não é possível capturar eventos de pseudo elementos com js, se faz necessário seguir outra alternativa. Como escutar eventos no seu elemento pai (natural no html).

O inconveniente disso é que, como podemos ter diversos descendentes desse elemento no nosso DOM, podemos aplicar nossas alterações no comportamento de elementos que não nos interessam. Daí a necessidade do uso do if, usando a condição para filtrar e agir em cima apenas do elemento desejado.

Espero ter ajudado. Abraço!