Publicado em 15 de jun.

Não repetir addEventListener

#javascript #perguntas-e-respostas-rapidas #addeventlistener

Galera, bom dia.

	Tenho 3 Botões onde cada um carrega via ajax em uma light box uma página HTML;

	Cada página vem com um addEventListener para escutar o evento do teclado e executar uma ação de acordo com a tecla digitada.

	 

	Até ae tudo bem. O problema começa, quando o lightBox é fechado.

	Quando o usuario click novamente para abrir a lightBox, o evento é adicionado novamente e ele reconhece duas 'tecladas';

	 

	Aparece por exemplo: aa

	 

	OBS: Pô cara, usa o método on.

	O método on não resolve, porque apaga o eventListener da outra ligthBox;

	 

	Preciso adicionar um addEventListener apenas uma vez, alguma idéia?

	 

	Abraços.

Discussão (3)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Marcos_imasters· 15 de jun.

tenta usando loop

var butoes = document.querySelectorAll('.botao');
butoes.forEach(function(x){
butoes[x].  addEventListener("click", function(){

alert('ação') });

Rafael da Silveira· 15 de jun.

O problema é que cada um executa uma ação diferente. O evento que preciso chamar é o keydonw.

E preciso fazer isso em várias light box, via php em um for vindo do banco de dados.

Cada light box tem um tipo que diz qual o evento de ser adicionado quando ela for clicada.

pra você entender...

algumas vão digitar algo na light a partir das teclas digitadas, outras vão verificar as setas, e outras números. essa função vai ser ativada quando a ligth é carregada, eu vejo o tipo e adiciono o evento.

Rafael da Silveira· 15 de jun.

Consegui resolver criando flag,

-Verifico se existe a flag

-se não existir adiciono o evento

-no final do evento crio a flag

Desse forma ele só vai adicionar o evento na primeira vez que a página for carregada via ajax, caso seja carregada outras vezes o evento não vai se repetir

if(typeOf flagImage == "undefined"){
	window.addEventListener('onkeydown',function(e){
 if(lightBoxCliked == 'Images'){
 document.querySelector('text').innerHTML += e.key;
 }

 flagImage = true;
 });
}