Por que o evento OnChange não está disparando na primeira mudança?

Question

Obrigado por reservar um tempo para ler minha pergunta.

Um "alcance" input elemento em html (slider) dispara um onchange -Event, no qual o conteúdo de um span elemento é atualizado com o valor atual do input elemento.

De alguma forma, a primeira mudança feita para o input elemento não dispara o onchange evento. Quando um evento 'OnClick' é usado, ele dispara.

Aqui está o código, html primeiro:

<div>

    <input id="main_options_plug1_lengthPE_input" type="range" step="10" value="0" max="200" min="0" onchange="setOpenEndPELength('plug1');"></input>
    <span id="main_options_plug1_lengthPE_value"> … </span>

</div>

E agora JavaScript:

function setOpenEndPELength(plug)
{
    if (plug == "plug1" || plug == "plug2")
    {
        var slider = document.getElementById("main_options_" + plug + "_lengthPE_input");
        var span = document.getElementById("main_options_" + plug + "_lengthPE_value");

        span.innerHTML = slider.value + " mm";
    }
}

Eu criei um Jsfiddle, então você pode tentar você mesmo.

Eu não encontrei uma resposta para esta pergunta no StackOverflow até agora, quaisquer perguntas que eu encontrei foram sobre onchange Evento não dispara nada. Nesse caso, é apenas a primeira mudança que não funciona.

Espero que alguém saiba a resposta. Qualquer ajuda é muito apreciada, obrigado antecipadamente.

Answer 1

Se eu entendo a pergunta corretamente, o problema é que no Firefox, o onchange O manipulador não é executado quando você pressiona o botão do mouse quando o cursor estiver no botão do slider e mova o mouse. Ele é executado somente depois de liberar o botão do mouse após esse movimento.

Esse parece ser o comportamento correto (embora alguns outros navegadores não cumpram), já que o html5 cr diz sobre o change evento: “Se o elemento não tiver um comportamento de ativação definido, mas usa uma interface do usuário que envolve uma ação de confirmação explícita, sempre que o usuário compromete uma alteração no valor ou lista de arquivos selecionados, o agente do usuário deve fazer fila uma tarefa para disparar um evento simples que bolhas denominadas alterações no elemento de entrada. ”

Essa é uma formulação um pouco complicada, mas é seguida por um exemplo esclarecedor: “Um terceiro exemplo de interface do usuário com uma ação de confirmação seria um controle de intervalo que usa um controle deslizante. Enquanto o usuário está arrastando o botão do controle, os eventos de entrada disparavam sempre que a posição mudasse, enquanto o evento de mudança apenas disparava quando o usuário soltasse o botão, comprometendo -se a um valor específico. ”

A conclusão é que, neste caso, você deve usar o oninput atributo em vez de onchange. Na prática, onmousemove funciona também, mas oninput é melhor, pois pode ser esperado que funcione com métodos de entrada que não usam um mouse (seja qual for o controle, por exemplo, controle por voz).

Answer 2

No documento, pronto, tente acionar o evento causado manualmente na primeira vez que a mudança não ocorre.

Então, basta adicionar código como abaixo:

$(“#main_options_plug1_lengthPE_input”).trigger(‘change’)

Answer 3

Um pouco de truque, se OnChange não disparar pela primeira vez, adicione:

onclick="console.log(1)"

Alguma outra ação no clique, ele ainda dispara o alvo como segunda vez, mas como primeiro você tem o clique.