スライダーの変更イベントの対処方法[input type="range"]
HTML5で導入されたスライダーの値の変更検知イベントは、ブラウザによって動作が異なります。特にスライダーの値が変更した事によって重い処理を行う場合などに「リアルタイム」で何度も変更イベントが発生すると困ります。
今回はスライダーの変更イベントの発生を1回だけにする方法をご紹介します。
各ブラウザのスライダーイベント
onchangeイベント、oninputイベントが発動する条件をまとめました。
| ブラウザ | onchange | oninput |
|---|---|---|
| IE11 | リアルタイムに発動 | 動作しない |
| Edge | 変更後に発動 | リアルタイムに発動 |
| Chrome | 変更後に発動 | リアルタイムに発動 |
| FireFox | 変更後に発動 | リアルタイムに発動 |
| iOS Safari | リアルタイムに発動 | リアルタイムに発動 |
IEとSafariがおかしいのがわかりますね。
実際に試してみる
onchange
oninput
対処方法
onmouseupイベントを使用するとスライダーの「値が変更された時点」でイベントが発動します。
onmouseup
但し、スライダーにフォーカスがある場合はキーボードの矢印キー(↑↓←→)でも操作できますので、そのイベントも拾い上げるとよいと思います。
スポンサーリンク
関連記事
公開日：2016年02月18日
記事NO：01779
