Warum schießt Onchange -Event nicht auf die erste Änderung?

Question

Vielen Dank, dass Sie sich die Zeit genommen haben, meine Frage zu lesen.

Ein "Bereich" input Element in HTML (Slider) feuert ein onchange -Event, in dem der Inhalt von a span Das Element wird mit dem aktuellen Wert der aktualisiert input Element.

Irgendwie die erste Änderung an der input Element feuert das nicht ab onchange Veranstaltung. Wenn ein "Onclick" -Event verwendet wird, feuert es.

Hier ist der Code, HTML zuerst:

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

Und jetzt 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";
    }
}

Ich habe a erstellt Jsfiddle, Sie können es selbst ausprobieren.

Ich habe bisher keine Antwort auf diese Frage auf Stackoverflow gefunden. Alle Fragen, die ich fand onchange Ereignis schießt überhaupt nicht. In diesem Fall ist es nur die erste Änderung, die nicht funktioniert.

Ich hoffe, jemand kennt die Antwort. Jede Hilfe wird sehr geschätzt, danke im Voraus.

Answer 1

Wenn ich die Frage richtig verstehe, ist das Problem das auf Firefox, das onchange Der Handler wird nicht ausgeführt, wenn Sie die Maustaste nach unten drücken, wenn sich der Cursor auf der Taste des Schiebereglers befindet und die Maus verschiebt. Es wird erst ausgeführt, nachdem Sie die Maustaste nach einer solchen Bewegung veröffentlicht haben.

Dies scheint das richtige Verhalten zu sein (obwohl einige andere Browser nicht einhalten), da HTML5 CR über die sagt change Veranstaltung: „Wenn das Element kein Aktivierungsverhalten definiert hat, sondern eine Benutzeroberfläche verwendet, die eine explizite Festungsmaßnahme beinhaltet, muss der Benutzer, wenn der Benutzer eine Änderung des Wertes oder der Liste der ausgewählten Dateien des Elements verpflichtet Feuer ein einfaches Ereignis, das sich im Eingabeelement ändern. “

Das ist etwas komplizierte Formulierung, aber es folgt ein klares Beispiel: „Ein drittes Beispiel für eine Benutzeroberfläche mit einer Commit -Aktion wäre eine Reichweite, die einen Schieberegler verwenden. Während der Benutzer den Knopf des Steuerelements zieht, würden Eingabeereignisse abgefeuert, wenn sich die Position änderte, während das Änderungsereignis nur abfeuern würde, wenn der Benutzer den Knopf losließ und sich zu einem bestimmten Wert verpflichte. “

Die Schlussfolgerung ist, dass Sie in diesem Fall die verwenden sollten oninput Attribut statt von onchange. In der Praxis, onmousemove funktioniert auch, aber oninput ist besser, da erwartet werden kann, dass es mit Eingabemethoden funktioniert, die keine Maus verwenden (was auch immer sie sein mögen, z. B. die Kontrolle durch Stimme).

Answer 2

Bei Dokumentbereit, versuchen Sie, Ereignisse manuell zu auslösen, verursacht keine Änderung, die keine Änderung erfolgt.

Fügen Sie also einfach Code wie unten hinzu:

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

Answer 3

Ein kleiner Trick, wenn Onchange das erste Mal nicht feuert, fügen Sie hinzu:

onclick="console.log(1)"

Einige andere Aktionen auf dem Klick, es schöpfen immer noch das Onchange als zweites Mal, aber als Erstes haben Sie den Klick.