Firefox で範囲入力ドラッグに対して onchange イベントがトリガーされないのはなぜですか?

範囲入力ドラッグで Firefox の onchange イベントがトリガーされない

「range」タイプの入力要素では、スライダーがドラッグされると、onchange イベントがトリガーされませんイベントは、スライダーが Firefox の新しい位置にドロップされた場合にのみトリガーされます。対照的に、Chrome やその他のブラウザは、ドラッグ中に onchange イベントをトリガーします。

解決策: oninput イベントを使用します

Firefox は、次のように、リリース時にのみ onchange イベントを正しくトリガーします。仕様。すべてのブラウザでドラッグ中にライブ更新をキャプチャするには、代わりに oninput イベントを使用します。

<code class="html">function showVal(newVal){
    document.getElementById("valBox").innerHTML=newVal;
}</code>

<code class="html"><span id="valBox"></span>
<input type="range" min="5" max="10" step="1" oninput="showVal(this.value)"></code>

ブラウザ間の互換性のために oninput と onchange を組み合わせる

の場合ブラウザ間の互換性については、oninput イベント ハンドラと onchange イベント ハンドラの両方を組み合わせることを検討してください。

<code class="html"><span id="valBox"></span>
<input
  type="range"
  min="5"
  max="10"
  step="1"
  oninput="showVal(this.value)"
  onchange="showVal(this.value)"
/></code>

これにより、リリース時に Firefox で onchange イベントが引き続きトリガーされる一方、oninput イベントはすべてのブラウザで継続的な更新を提供します。

以上がFirefox で範囲入力ドラッグに対して onchange イベントがトリガーされないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。