Publicado em 24 de out.

ValueChange em Elemento oculto

Pois cá estava eu fazendo algumas coisinhas e me deparei com uma questão.

Que o o javascript não detecta mudanças em elementos não visíveis.

Para ser mais coeso vamos ao exemplo:

<select id="teste">
 <option value="a">Opção A</option>
 <option value="b">Opção B</option>
</select>

<button onclick="mudar()">Alterar</button>

<script>
 var teste = document.getElementById('teste');

 teste.addEventListener('ValueChange', function (e) {
 console.log(e.target);
 });

 function mudar() {
 teste.value = teste.value === 'a' ? 'b' : 'a';
 console.log('Mudou para:' + teste.value);
 }
</script>

	Simples né, temos um seletor que contém um evento que detecta quando ele é modificado.

	E uma função que irá modificar o valor do seletor.

	Até aqui tudo bem.... Então ao X do problema.

	 

	Adicionamos isso na função que altera o seletor:

teste.style.display = 'none';

	Logo quando pelo botão alteramos o valor temos no console a exibição do elemento, e ocultando o seletor.

	Uma vez oculto o evento que detecta se seu valor é alterado não mais dispara.

	 

	Alguém teria alguma ideia de como contornar isso, fazendo com que o evento sempre dispare ao alterar o seletor (mesmo ele oculto)?

	 

	 

	Para ser franco, o único jeito que pensei em solucionar é:

	Alterar o opacidade do seletor para 0(zero), assim ele está visível mas transparente, então alterar suas dimensões height e width também para zero, assim não ocupando espaço no documento.

	Porém acho que essa minha solução não é a mais ideal.

Discussão (4)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Maujor· 24 de out.

@Omar

Não existe um evento chamado "ValueChange", portanto o correto é:

teste.addEventListener('change', function (e) {
 console.log(e.target);
 });

	Segundo o script acima o console retornará **e.target** somente quando for disparado o evento **change* no elemento select***. 

	O click no botão dispara a função mudar() que altera o valor de select, mas **não atrela** o evento *change no select*.

	 

	Assim, o console não retorna **e.target** quando o botão é clicado estando select visível ou oculto.

Omar~· 24 de out.

É um evento específico que só funciona em alguns elementos em situações como a que eu definitivamente quero chegar, no caso uma ação externa. change só detecta se o o evento é disparado pelo próprio elemento em questão e não por ação externa.

	Na verdade a questão está sobre a tag <progress> e não no <select>, mas usei um seletor pois assim o script de exemplo ficaria mais simples de demostrar.

	Enfim em todo caso o ValueChange só é disparado no MozillaFirefox

Maujor· 24 de out.

1 hora atrás, Omar~ disse:

Enfim em todo caso o ValueChange só é disparado no MozillaFirefox

	Independente disso ou de PROGRESS ou SELECT, não se trata de: "o javascript não detecta mudanças em elementos não visíveis."

	Não é a visibilidade que está impedindo a identificação do elemento select no console.

	Quer resolver? Defina o evento **change do select** dentro da função **mudar()**.

Omar~· 25 de out.

@Maujor

Não importa cara, o evento change não é acionado por ação externa independente do elemento oculto ou não. Somente se o o próprio elemento em si o dispara.

Que seja consegui resolver minha situação aqui simulando a tag label, pelo fato dela se vincular a outro elemento, usei a mesma lógica que os browsers usam para a tag label.