HTMLで超シンプルなスライダーをjQueryで実装していたら、ひさびさに「超トホホ・ミス」をやって1日以上ハマってしまいました。トホホというか、単なる見落としなんですが・・・。

なんか作るとき、chromeを使って確認しているんですが・・・さて出来た！と思ってクソ・ブラウザInternet Explorerで確認すると・・・案の定動かない。IE9ではうごいていたはずなんだが・・・と思ってなにが原因かソースを見ること数時間。あれこれ試行錯誤しても動かない。

で、下のような簡単なコードをIE8で確認したら、うんともすんとも言わない。たぶん、ほとんどの人はこう思ったでしょう、

おまえはあほか！

と。

$(window).click(function(ev)
                {
                  alert('window.click!');
                });

よく考えてみたら、Internet Explorer で windowオブジェクトにonclick とか onmousedown とか onmousemoveとかなかった！というオチ。
エラー吐いてくれればすぐ分かったのに・・・なまじIE9で動いてたもんだから分からなかった。

肝心のスライダーは、こんなん。テストページはこっち。

// 単純なスライダーの一部(とりあえずUI部品だけのテストコード)
// これにコールバックを登録するコードを付け足せばとりあえず完成。の一歩手前。
var $frame = jQuery(document);

jQuery('.slider').mousedown(function(e)
                            {
                              var $slider = jQuery(this);
                              var el = this;
                              
                              if(typeof this.slider !== 'object')
                                this.slider =
                                {
                                  drag  : false,
                                  pos   : 0,
                                  limit : $slider.parent().width() - $slider.width() - parseInt($slider.css('paddingLeft')) - parseInt($slider.css('paddingRight')),
                                  bgcolor: this.style.backgroundColor
                                };

                              this.slider.drag = true;
                              
                              $frame.bind('mousemove.slider',
                                        function(e)
                                        {
                                          if(!el.slider.drag)
                                            return;
                                          
                                          el.slider.prev = el.slider.prev ? el.slider.prev : e.pageX;
                                          
                                          var cur = el.slider.pos + (e.pageX-el.slider.prev);
                                          if(el.slider.limit >= cur && 0 <= cur)
                                            {
                                              el.slider.pos = cur;
                                              el.innerHTML = el.style.marginLeft = cur + 'px';
                                              el.slider.prev = e.pageX;
                                            }
                                          else if(el.slider.limit < cur)
                                            {
                                              el.slider.pos = el.slider.limit;
                                              el.innerHTML = el.style.marginLeft = el.slider.pos + 'px';
                                            }
                                          else if(0 > cur)
                                            {
                                              el.slider.pos = 0
                                                el.innerHTML = el.style.marginLeft = el.slider.pos + 'px';
                                            }
                                        })
                                .bind('mouseup.slider',
                                      function(e)
                                      {
                                        $slider.mouseup();
                                      });
                              
                              e.preventDefault();
                       })
                 .mouseup(function(e)
                       {
                         if(this.slider.drag)
                           {
                             this.slider.drag = false;
                             this.slider.prev = 0;
                             $frame.unbind('.slider');
                           }
                       });

やっつけスクリプトに、えらい時間かけてしまった・・・あ～あ orz

・・・とにかく、一刻も早くIE8を含め、IE10以下のバージョンのInternet Explorerがこの世から消え去ることを願うばかりなり。