最初の変更で燃え上がっていないのはなぜですか？

Question

私の質問を読んでくれてありがとう。

「範囲」 input HTML（スライダー）の要素が発火します onchange -event、aのコンテンツ span 要素は現在の値で更新されます input エレメント。

どういうわけか、最初に変更されました input 要素は発射しません onchange イベント。 「オンクリック」イベントを使用すると、発砲します。

これがコードです、最初にHTML：

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

そして今、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";
    }
}

私は作成しました jsfiddle, 、だからあなたはそれを自分で試すことができます。

これまでのところ、StackoverFlowに関するこの質問に対する答えは見つかりませんでした。 onchange イベントはまったく発砲しません。この場合、機能しないのは最初の変更にすぎません。

誰かが答えを知っていることを願っています。事前に感謝します。

Answer 1

質問を正しく理解している場合、問題はFirefoxで、 onchange カーソルがスライダーのボタンにあるときにマウスボタンを押してマウスを移動するときに、ハンドラーは実行されません。そのような移動後にマウスボタンを放出した後にのみ実行されます。

HTML5 CRが次のように述べているため、これは正しい動作のようです（他のブラウザも従いませんが） change イベント: ：「要素にアクティベーションの動作が定義されていないが、明示的なコミットアクションを伴うユーザーインターフェイスを使用する場合、ユーザーが選択したファイルの要素の値またはリストに変更をコミットするたびに、ユーザーエージェントはタスクをキューにしなければなりません。入力要素で変更という名前のバブルが発射します。」

これは少し複雑な定式化ですが、その後に明確な例が続きます。ユーザーがコントロールのノブをドラッグしている間、ポジションが変更されるたびに入力イベントが発生しますが、ユーザーがノブを手放し、特定の値にコミットしたときにのみ変更イベントが発生します。」

結論は、この場合、 oninput の代わりに属性 onchange. 。実際には、 onmousemove うまくいきますが、 oninput マウスを使用しない入力方法で動作することが期待できるため、より良いです（たとえば、音声ごとに制御する可能性があります）。

Answer 2

ドキュメントの準備が整っていると、イベントが手動で最初の変更が発生したことをトリガーしてみてください。

以下のようにコードを追加するだけです。

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

Answer 3

ちょっとしたトリック、Onchangeが初めて発射しない場合、追加してください。

onclick="console.log(1)"

クリック時の他のアクションでは、まだ2回目としてオンチェンジを発射しますが、最初にクリックします。