Waarom skiet OnChange -gebeurtenis nie op die eerste verandering nie?

Question

Dankie dat u die tyd geneem het om my vraag te lees.

'N "reeks" input element in html (glyer) skiet 'n onchange -vent, waarin die inhoud van a span element word opgedateer met die huidige waarde van die input element.

Op een of ander manier het die eerste verandering aan die input element skiet nie die onchange gebeurtenis. As 'n 'OnClick' -gebeurtenis gebruik word, brand dit.

Hier is die kode, HTML eerste:

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

En nou 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";
    }
}

Ek het 'n Jsfiddle, sodat u dit self kan probeer.

Ek het tot dusver nie 'n antwoord op hierdie vraag op StackOverflow gevind nie, en enige vrae waaroor ek gevind het onchange Gebeurtenis skiet glad nie. In hierdie geval is dit slegs die eerste verandering wat nie werk nie.

Hoop iemand weet die antwoord. Enige hulp word baie waardeer, by voorbaat dankie.

Answer 1

As ek die vraag reg verstaan, is die probleem dat op Firefox, die onchange Handler word nie uitgevoer as u die muisknoppie druk wanneer die muis op die knoppie van die skuifknoppie is en die muis skuif nie. Dit word eers uitgevoer nadat u die muisknoppie na so 'n skuif vrygestel het.

Dit blyk die regte gedrag te wees (hoewel sommige ander blaaiers nie daaraan voldoen nie), aangesien HTML5 CR oor die change gebeurtenis: “As die element nie 'n aktiveringsgedrag het nie, maar 'n gebruikerskoppelvlak gebruik wat 'n eksplisiete verbintenisaksie behels, dan moet die gebruikersagent 'n verandering aan die waarde van die element of 'n lys van geselekteerde lêers doen, moet Vuur 'n eenvoudige gebeurtenis wat borrels met die naam verander by die invoerelement. ”

Dit is 'n bietjie ingewikkelde formulering, maar dit word gevolg deur 'n duidelike voorbeeld: ''n Derde voorbeeld van 'n gebruikerskoppelvlak met 'n verbintenis -aksie sou 'n reeks kontroles wees wat 'n skuifknop gebruik. Terwyl die gebruiker die knop van die kontrole sleep, sal die insetgebeurtenisse afvuur wanneer die posisie verander het, terwyl die veranderingsgebeurtenis slegs sou skiet as die gebruiker die knop loslaat en tot 'n spesifieke waarde verbind. ”

Die gevolgtrekking is dat u in hierdie geval die oninput kenmerk in plaas van onchange. In die praktyk, onmousemove werk ook, maar oninput is beter, want daar kan verwag word dat daar met invoermetodes werk wat nie 'n muis gebruik nie (wat hulle ook al mag wees, bv. Beheer volgens stem).

Answer 2

Probeer om die geleentheid met die hand te veroorsaak wat die eerste keer verander het, nie plaasgevind nie.

Voeg dus net kode by soos hieronder:

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

Answer 3

'N Klein truuk, as OnChange nie die eerste keer afvuur nie, voeg by:

onclick="console.log(1)"

'N ander aksie op die klik, dit vuur die onchange steeds as die tweede keer, maar as jy eers die klik het.