¿Por qué el evento Onchange no dispara en el primer cambio?

Question

Gracias por tomarse el tiempo para leer mi pregunta.

Un "rango" input El elemento en html (control deslizante) dispara un onchange -EVENT, en el que el contenido de un span El elemento se actualiza con el valor actual del input elemento.

De alguna manera, el primer cambio realizado al input El elemento no dispara el onchange evento. Cuando se usa un evento de 'onclick', se dispara.

Aquí está el código, html primero:

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

Y ahora 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";
    }
}

Creé un Jsfiddle, para que puedas probarlo tú mismo.

No encontré una respuesta a esta pregunta en StackOverflow hasta ahora, cualquier pregunta que encontré fue sobre onchange El evento no dispara en absoluto. En este caso, es solo el primer cambio que no funciona.

Espero que alguien sepa la respuesta. Se agradece mucho cualquier ayuda, gracias de antemano.

Answer 1

Si entiendo la pregunta correctamente, el problema es que en Firefox, el onchange El controlador no se ejecuta cuando presiona el botón Atención del mouse cuando el cursor está en el botón del control deslizante y mueve el mouse. Se ejecuta solo después de liberar el botón del mouse después de tal movimiento.

Este parece ser el comportamiento correcto (aunque otros navegadores no cumplen), ya que HTML5 CR dice sobre el change evento: " Dispare un evento simple que burbujee el cambio en el elemento de entrada ".

Esa es una formulación un poco complicada, pero es seguido por un ejemplo aclaratorio: “Un tercer ejemplo de una interfaz de usuario con una acción de confirmación sería un control de rango que usa un control deslizante. Mientras el usuario está arrastrando la perilla del control, los eventos de entrada dispararían cada vez que cambiaba la posición, mientras que el evento de cambio solo dispararía cuando el usuario soltara la perilla, comprometiéndose con un valor específico ".

La conclusión es que en este caso, debe usar el oninput atributo en lugar de onchange. En la práctica, onmousemove Funciona también, pero oninput es mejor, ya que se puede esperar que funcione con métodos de entrada que no usan un mouse (lo que sea que sean, por ejemplo, control por voz).

Answer 2

En el documento listo, intente activar eventos manualmente causado por primera vez, no se ocurre un cambio.

Así que simplemente agregue el código como se muestra a continuación:

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

Answer 3

Un pequeño truco, si OnChange no dispara la primera vez, agregue:

onclick="console.log(1)"

Alguna otra acción en el clic, todavía dispara el cambio por segunda vez, pero como primero tiene el clic.