Ir para conteúdo
Omar~

ValueChange em Elemento oculto

Recommended Posts

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.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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.

Compartilhar este post


Link para o post
Compartilhar em outros sites

É 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

Compartilhar este post


Link para o post
Compartilhar em outros sites
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()

Compartilhar este post


Link para o post
Compartilhar em outros sites

@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.

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.