とあるシステムのプログラム修正を行ったときのお話です。
要求はいたって単純
- 全選択のチェックボックスを追加
- チェックボックスにチェックを入れると全行を選択
- チェックボックスのチェックを外すと全行の選択を解除
全選択チェックボックスのonchangeイベント内で
全行のチェックボックスをquerySelectorAllで抽出して値を一括設定するだけで済む話
だと思っていました。
だが、しかし
VisualStudioでさくっとコードを書いてデバッグ実行して動作確認
ここまでは良かった
問題が起きたのはプログラムを動作検証環境に発行して動作確認をしたタイミング
なぜか全選択チェックボックスが動作しない。。。
原因その1
改修を行ったページ内でIEのモード指定がされておらず、
社内での規定のバージョン(IE6)のモードで動作していた
IE6とかいつの時代の遺物だよっと思いながらもモード指定を追加
<meta http-equiv="x-ua-compatible" content="IE=edge">
原因その２
Edge指定をしても相変わらず動いてくれないこのチェックボックス
開発者ツールを開きモードを確認してみる
IE8！？
どうやらIE6,7,8のいずれかでしか動かせない様になっているらしい。。。
周知してくれ。。。
IE8で動かない部分を確認したところ、constが該当した。
constはIE11から対応しているらしい。
ということで以下のconstを
const cbx = document.getElementById('cbxAll')
var に置き換えてみた。
var cbx = document.getElementById('cbxAll')
原因その３
全選択チェックボックス自体は動くようにはなったが動作がおかしい
チェックを入れてからほかのエリアをクリックしないと動作してくれない。。。
どうやらIE8のチェックボックスのonchangeイベントはフォーカス移動時に発生しているらしい
つまり、onchangeイベントを使用した場合、
ユーザの要求を充たす動作は実現ができないということ。。。
チェックボックスはクリックにより値の切り替えを行うため
onchangeイベントの代替としてonclickイベントを使用することでこの問題は解決
まとめ
IEを利用した古くから存在するシステムで必ずぶつかるIEのバージョン問題。
今回のケースはだいぶ楽な部類です。
IEを利用したシステムの改修を行う際は必ず、以下の点を事前に把握しておきましょう。
- デフォルトのIEバージョン
- 利用可能なIEバージョン
ただし、利用可能なIEバージョンについては、調整可能なのであればIE11まで利用可能となるよう調整を行いましょう。
EdgeのIEモードのサポート終了までまだ期間がありますが、IE11に対応したプログラムにしておけば、IEモードのサポート終了の影響も最低限に抑えられます。