で遊んだとき<input type="range">、スライダーがドラッグされている間にChromeなどがonchangeイベントをトリガーする新しい位置にスライダーをドロップした場合にのみ、Firefoxがonchangeイベントをトリガーします。
Firefoxでドラッグするときにどうすればよいですか？
function showVal(newVal){
document.getElementById("valBox").innerHTML=newVal;
}<span id="valBox"></span>
<input type="range" min="5" max="10" step="1" onchange="showVal(this.value)">回答:
どうやらChromeとSafariは間違っonchangeています。ユーザーがマウスを離したときにのみトリガーされます。継続的な更新を取得するには、oninputイベントを使用する必要があります。このイベントは、Firefox、Safari、Chromeのライブ更新をマウスとキーボードの両方からキャプチャします。
ただし、oninputはIE10ではサポートされていないため、次のように2つのイベントハンドラーを組み合わせることが最善策です。
<span id="valBox"></span>
<input type="range" min="5" max="10" step="1"
oninput="showVal(this.value)" onchange="showVal(this.value)">詳細については、このBugzillaスレッドを確認してください。
$("#myelement").on("input change", function() { doSomething(); });jQueryを使用します。
onchange()ようなモバイルWeb では機能しません。代替案はありますか？Android ChromeiOS Safari
概要：
ここでは、jQueryを使用しないクロスブラウザーのデスクトップおよびモバイル機能を提供し、現在のブラウザーでは不可能な、範囲/スライダーの相互作用に一貫して応答します。基本的に、すべてのブラウザーにIE11のon("change"...イベントon("change"...またはそれらのイベントのいずれかをエミュレートするように強制しon("input"...ます。新しい機能は...
function onRangeChange(r,f) {
var n,c,m;
r.addEventListener("input",function(e){n=1;c=e.target.value;if(c!=m)f(e);m=c;});
r.addEventListener("change",function(e){if(!n)f(e);});
}...ここrで、範囲入力要素とfリスナーです。リスナーは、範囲/スライダーの値を変更するインタラクションの後に呼び出されますが、その値を変更しないインタラクションの後には呼び出されません。
問題：
2016年6月上旬の時点で、範囲/スライダーの使用に対するブラウザーの反応は異なります。5つのシナリオが関連します。
次の表は、対応する上記のシナリオのどれに関して、少なくとも3つの異なるデスクトップブラウザーの動作が異なるかを示しています。
解決：
このonRangeChange関数は、範囲/スライダーの相互作用に対する一貫した予測可能なクロスブラウザー応答を提供します。すべてのブラウザが次の表に従って動作するように強制します。
IE11では、コードは本質的にすべてが現状のままで動作することを許可します。つまり"change"、標準的な方法でイベントが機能することを許可し、"input"イベントはいずれにせよ発生しないため、無関係です。他のブラウザでは、"change"イベントは効果的に消音されます（余分なイベントや時々すぐには見えないイベントが発生するのを防ぐため）。加えて"input"イベントは、範囲/スライダーの値が変更されたときにのみリスナーを起動します。一部のブラウザー（Firefoxなど）では、上記のリストのシナリオ1、4、および5でリスナーが効果的に沈黙するため、これが発生します。
（あなたが本当にどちらのシナリオ1、4および/または5で活性化されるリスナーが必要な場合は、取り入れてみてください可能性が"mousedown"/ "touchstart"、"mousemove"/ "touchmove"および/または"mouseup"/ "touchend"イベントを。そのような解決策は、この答えの範囲を超えています。）
モバイルブラウザの機能：
このコードはデスクトップブラウザでテストしましたが、モバイルブラウザではテストしていません。ただし、このページの別の回答で、 MBourneはここに私の解決策を示しています"...私が見つけたすべてのブラウザー（Winデスクトップ：IE、Chrome、Opera、FF、Android Chrome、OperaおよびFF、iOS Safari）で機能するように見えます"。（MBourneに感謝します。）
使用法：
このソリューションを使用するには、onRangeChange上記の要約からの関数（簡略化/縮小）または以下のデモコードスニペット（機能的には同じですが、より自明）を独自のコードに含めます。次のように呼び出します。
onRangeChange(myRangeInputElmt, myListener);ここmyRangeInputElmtで、目的の<input type="range">DOM要素でmyListenerあり、の"change"ようなイベントで呼び出されるリスナー/ハンドラー関数です。
リスナーは、必要に応じてeventパラメーターなしにすることも、パラメーターを使用することもできます。つまり、ニーズに応じて次のいずれかが機能します。
var myListener = function() {...または
var myListener = function(evt) {...（このinput例では、要素からのイベントリスナーの削除（例：の使用removeEventListener）については触れていません。）
デモの説明：
以下のコードスニペットでは、関数onRangeChangeは汎用的なソリューションを提供します。残りのコードは、その使用を示すための単なる例です。で始まる変数はすべてmy...ユニバーサルソリューションとは無関係であり、デモのためにのみ存在します。
デモショー範囲/スライダ値ならびに回数標準"change"、"input"およびカスタム"onRangeChange"イベントは、（それぞれの行A、B及びC）焼成しました。このスニペットを別のブラウザーで実行する場合は、範囲/スライダーを操作する際に以下に注意してください。
デモコード：
// main function for emulating IE11's "change" event:
function onRangeChange(rangeInputElmt, listener) {
var inputEvtHasNeverFired = true;
var rangeValue = {current: undefined, mostRecent: undefined};
rangeInputElmt.addEventListener("input", function(evt) {
inputEvtHasNeverFired = false;
rangeValue.current = evt.target.value;
if (rangeValue.current !== rangeValue.mostRecent) {
listener(evt);
}
rangeValue.mostRecent = rangeValue.current;
});
rangeInputElmt.addEventListener("change", function(evt) {
if (inputEvtHasNeverFired) {
listener(evt);
}
});
}
// example usage:
var myRangeInputElmt = document.querySelector("input" );
var myRangeValPar = document.querySelector("#rangeValPar" );
var myNumChgEvtsCell = document.querySelector("#numChgEvtsCell");
var myNumInpEvtsCell = document.querySelector("#numInpEvtsCell");
var myNumCusEvtsCell = document.querySelector("#numCusEvtsCell");
var myNumEvts = {input: 0, change: 0, custom: 0};
var myUpdate = function() {
myNumChgEvtsCell.innerHTML = myNumEvts["change"];
myNumInpEvtsCell.innerHTML = myNumEvts["input" ];
myNumCusEvtsCell.innerHTML = myNumEvts["custom"];
};
["input", "change"].forEach(function(myEvtType) {
myRangeInputElmt.addEventListener(myEvtType, function() {
myNumEvts[myEvtType] += 1;
myUpdate();
});
});
var myListener = function(myEvt) {
myNumEvts["custom"] += 1;
myRangeValPar.innerHTML = "range value: " + myEvt.target.value;
myUpdate();
};
onRangeChange(myRangeInputElmt, myListener);table {
border-collapse: collapse;
}
th, td {
text-align: left;
border: solid black 1px;
padding: 5px 15px;
}<input type="range"/>
<p id="rangeValPar">range value: 50</p>
<table>
<tr><th>row</th><th>event type </th><th>number of events </th><tr>
<tr><td>A</td><td>standard "change" events </td><td id="numChgEvtsCell">0</td></tr>
<tr><td>B</td><td>standard "input" events </td><td id="numInpEvtsCell">0</td></tr>
<tr><td>C</td><td>new custom "onRangeChange" events</td><td id="numCusEvtsCell">0</td></tr>
</table>クレジット：
ここでの実装は主に私自身のものですが、MBourneの回答に触発されました。その別の答えは、「入力」イベントと「変更」イベントをマージでき、結果のコードがデスクトップとモバイルの両方のブラウザーで機能することを示唆しています。ただし、その回答のコードにより、非表示の「余分な」イベントが発生しますが、それ自体は問題があり、発生するイベントはブラウザ間で異なるため、さらに問題があります。ここでの私の実装はそれらの問題を解決します。
キーワード：
JavaScript入力タイプの範囲スライダーイベントは、入力ブラウザーの互換性を変更します。クロスブラウザーデスクトップモバイルno-jQuery
あまり役に立たない回答の下のコメントではなく、独自の回答であるに値するので、これを回答として投稿します。HTMLとは別のファイルにすべてのjsを保持できるため、この方法は受け入れられた回答よりもはるかに優れています。
承認された回答の下でのコメントでのJamrelianによる回答。
$("#myelement").on("input change", function() {
//do something
});Jaimeによるこのコメントに注意してください。
このソリューションでは、Chromeではハンドラーへの2つの呼び出し（イベントごとに1つ）が発生することに注意してください。そのため、それを気にする場合は、それを防ぐ必要があります。
マウスの移動を停止するとイベントが発生し、マウスボタンを離すとイベントが発生します。
changeイベントとinput、機能を2回トリガーするイベントに関して、これはほとんど問題ではありません。
で発火する関数inputがある場合、changeイベントが発火するときに問題が発生することはほとんどありません。
input範囲入力スライダーをドラッグすると、すばやく起動します。最後にもう1つの関数呼び出しの発火を心配することは、inputイベントである水の海と比較して、1滴の水を心配するようなものです。
changeイベントをまったく含める理由は、ブラウザーの互換性（主にIEとの）のためです。
更新：マウスイベントを使用して、デスクトップ（ただしモバイルではない）ブラウザーで範囲/スライダー操作を使用する方法の例として、この回答をここに残します。ただし、今はまったく別の方法でも書いているので、このページの他の場所で、この問題に対して異なるブラウザーのデスクトップとモバイルのソリューションを提供するために別のアプローチを使用する方が良いと思います。
元の答え：
要約：使用せず範囲入力値を読み取ることを可能にするクロスブラウザ、普通のJavaScript（すなわち無jQueryの）溶液on('input'...および/またはon('change'...ブラウザ間で一貫れる作業。
今日（2016年2月下旬）の時点では、まだブラウザーの不整合が残っているため、ここで新しい回避策を提供します。
問題：範囲入力、つまりスライダーを使用するon('input'...と、MacおよびWindowsのFirefox、Chrome、Opera、およびMac Safariで継続的に更新される範囲値が提供されon('change'...ますが、マウスアップでのみ範囲値が報告されます。対照的に、Internet Explorer（v11）on('input'...ではまったく機能せず、on('change'...継続的に更新されます。
ここでは、mousedown、mousemove、および（場合によっては）mouseupイベントを使用して、バニラJavaScript（つまりjQueryなし）を使用するすべてのブラウザーで同一の連続範囲値レポートを取得する2つの戦略を報告します。
戦略1：短いが効率が悪い
より効率的なコードよりも短いコードを好む場合は、mousesdownとmousemoveを使用し、mouseupを使用しないこの最初のソリューションを使用できます。これにより、必要に応じてスライダーが読み取られますが、ユーザーがクリックしていないためスライダーをドラッグしていない場合でも、マウスオーバーイベント中に不必要に発火し続けます。基本的には、「マウスダウン」後と「マウスムーブ」イベント中の両方で範囲値を読み取り、それぞれを使用して少し遅延させますrequestAnimationFrame。
var rng = document.querySelector("input");
read("mousedown");
read("mousemove");
read("keydown"); // include this to also allow keyboard control
function read(evtType) {
rng.addEventListener(evtType, function() {
window.requestAnimationFrame(function () {
document.querySelector("div").innerHTML = rng.value;
rng.setAttribute("aria-valuenow", rng.value); // include for accessibility
});
});
}<div>50</div><input type="range"/>戦略2：より長く、より効率的
より効率的なコードが必要で、より長いコード長を許容できる場合は、mousedown、mousemove、mouseupを使用する次のソリューションを使用できます。これは、必要に応じてスライダーも読み取りますが、マウスボタンが離されるとすぐに適切に読み取りを停止します。本質的な違いは、「mousedown」の後に「mousemove」のリスニングを開始するだけであり、「mouseup」の後に「mousemove」のリスニングを停止することです。
var rng = document.querySelector("input");
var listener = function() {
window.requestAnimationFrame(function() {
document.querySelector("div").innerHTML = rng.value;
});
};
rng.addEventListener("mousedown", function() {
listener();
rng.addEventListener("mousemove", listener);
});
rng.addEventListener("mouseup", function() {
rng.removeEventListener("mousemove", listener);
});
// include the following line to maintain accessibility
// by allowing the listener to also be fired for
// appropriate keyboard events
rng.addEventListener("keydown", listener);<div>50</div><input type="range"/>デモ：上記の回避策の必要性と実装の詳細な説明
次のコードは、この戦略のさまざまな側面をより完全に示しています。説明はデモに埋め込まれています。
touchmove十分なはずですしmousemove、この場合と同じように扱うことができると思います。
Andrew Willemのソリューションは、モバイルデバイスと互換性がありません。
Edge、IE、Opera、FF、Chrome、iOS Safari、および同等のモバイル（私がテストできた）で機能する彼の2番目のソリューションの変更点を次に示します。
更新1：「requestAnimationFrame」の部分を削除しました。これは必要ないことに同意します。
var listener = function() {
// do whatever
};
slider1.addEventListener("input", function() {
listener();
slider1.addEventListener("change", listener);
});
slider1.addEventListener("change", function() {
listener();
slider1.removeEventListener("input", listener);
}); 更新2：Andrewの2016年6月2日更新された回答への応答：
ありがとう、Andrew-私が見つけたすべてのブラウザー（Winデスクトップ：IE、Chrome、Opera、FF、Android Chrome、OperaおよびFF、iOS Safari）で動作するようです。
更新3：if（「スライダーの入力」）ソリューション
以下は、上記のすべてのブラウザで機能するようです。（現在、元のソースを見つけることができません。）私はこれを使用していましたが、その後IEで失敗したため、別のソースを探しに行ったので、ここで終了しました。
if ("oninput" in slider1) {
slider1.addEventListener("input", function () {
// do whatever;
}, false);
}しかし、あなたの解決策を確認する前に、これがIEで再び機能していることに気付きました-おそらく他の競合があったのでしょう。
ブラウザー間の適切な動作と理解しやすいコードを得るには、フォームを組み合わせてonchange属性を使用するのが最善です。
function showVal(){
valBox.innerHTML = inVal.value;
}<form onchange="showVal()">
<input type="range" min="5" max="10" step="1" id="inVal">
</form>
<span id="valBox">
</span>oninputを使用しても同じで、値は直接変更されます。
function showVal(){
valBox.innerHTML = inVal.value;
}<form oninput="showVal()">
<input type="range" min="5" max="10" step="1" id="inVal">
</form>
<span id="valBox">
</span>さらに別のアプローチ-処理するイベントのタイプを通知する要素にフラグを設定するだけです。
function setRangeValueChangeHandler(rangeElement, handler) {
rangeElement.oninput = (event) => {
handler(event);
// Save flag that we are using onInput in current browser
event.target.onInputHasBeenCalled = true;
};
rangeElement.onchange = (event) => {
// Call only if we are not using onInput in current browser
if (!event.target.onInputHasBeenCalled) {
handler(event);
}
};
}JavaScriptの「ondrag」イベントを使用して、継続的に起動できます。次の理由により、「入力」よりも優れています。
ブラウザのサポート。
「オンドラッグ」イベントと「変更」イベントを区別できます。「入力」はドラッグと変更の両方で発生します。
jQueryの場合：
$('#sample').on('drag',function(e){
});
onchange発砲しません。この問題を見つけたのは、その問題のトラブルシューティングでした。