Perché l'evento OnChange non sta sparando al primo cambiamento?

Question

Grazie per aver dedicato del tempo per aver letto la mia domanda.

Una "gamma" input elemento in html (cursore) spara un onchange -evento, in cui il contenuto di a span L'elemento viene aggiornato con il valore corrente del input elemento.

In qualche modo, il primo cambiamento apportato al input L'elemento non spara il onchange evento. Quando viene utilizzato un evento "OnClick", spara.

Ecco il codice, HTML prima:

<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 ora 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";
    }
}

Ho creato un Jsfiddle, quindi puoi provarlo da solo.

Finora non ho trovato una risposta a questa domanda su StackOverflow onchange L'evento non spara affatto. In questo caso, è solo il primo cambiamento che non funziona.

Spero che qualcuno conosca la risposta. Qualsiasi aiuto è molto apprezzato, grazie in anticipo.

Answer 1

Se capisco correttamente la domanda, il problema è che su Firefox, il onchange Il gestore non viene eseguito quando si preme il pulsante del mouse quando il cursore si trova sul pulsante del cursore e si sposta il mouse. Viene eseguito solo dopo aver rilasciato il pulsante del mouse dopo una tale mossa.

Questo sembra essere il comportamento corretto (anche se alcuni altri browser non sono conformi), poiché HTML5 CR dice sul change evento: "Se l'elemento non ha un comportamento di attivazione definito ma utilizza un'interfaccia utente che prevede un'azione di commit esplicita, ogni volta che l'utente commette una modifica al valore dell'elemento o all'elenco di file selezionati, l'agente utente deve mettere in coda un'attività Accendi un semplice evento che bolle denominata modifica nell'elemento di input. "

Questa è una formulazione un po 'complicata, ma è seguito da un esempio chiarificante: “Un terzo esempio di un'interfaccia utente con un'azione di commit sarebbe un controllo di un intervallo che utilizzano un cursore. Mentre l'utente sta trascinando la manopola del controllo, gli eventi di input si accendono ogni volta che la posizione cambiata, mentre l'evento di modifica si accende solo quando l'utente lasciava andare la manopola, impegnandosi in un valore specifico. "

La conclusione è che in questo caso, dovresti usare il oninput attributo invece di onchange. In pratica, onmousemove Funziona anche, ma oninput è meglio, dal momento che ci si può aspettare che funzioni con metodi di input che non usano un mouse (qualunque cosa possano essere, ad esempio il controllo per voce).

Answer 2

Sul documento pronto, prova a innescare l'evento causato manualmente la prima modifica della prima volta.

Quindi aggiungi il codice come di seguito:

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

Answer 3

Un piccolo trucco, se OnChange non spara la prima volta, aggiungi:

onclick="console.log(1)"

Qualche altra azione sul clic, spara ancora l'onchange come seconda volta, ma come prima hai il clic.