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がこの世から消え去ることを願うばかりなり。