IE9以降でのevent.pageX、event.pageYの取得方法


こんばんみ。という懐かしいフレーズで今日はIE9以降で困った事を書いてみましょう。

早速ですがこんな感じのコードでツールチップとやらを作ってみました。

var tooltip = '<div class="tooltip">てへぺろ</div>';
$('body').append(tooltip);

$('hoge').mouseover(function(e) {
  $('.tooltip').fadeIn('500');
  $('.tooltip').fadeTo('10', 1.9);
}).mousemove(function(e) {
  $('.tooltip').css('left', e.pageX + 5);
  $('.tooltip').css('top', e.pageY - 20);
});

この方法だとスクロールしない画面であれば問題なく動作するんだけど、
縦長や横長にスクロールされる画面の場合、
IE9以降だとツールチップのX、Y作業がずれてしまい正常に動作してくれません。
こんな感じですね。
Edit fiddle - JSFiddle
他のブラウザやIE8までならきちんと動きます。

これは困った、どうしようかと悩んでいたのですが下記の方法で対処しました。

var tooltip = '<div class="tooltip">てへぺろ</div>';
$('body').append(tooltip);

$('hoge').mouseover(function(e) {
  $('.tooltip').fadeIn('500');
  $('.tooltip').fadeTo('10', 1.9);
}).mousemove(function(e) {
  pageX = e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
  pageY = e.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
  $('.tooltip').css('left', pageX + 5);
  $('.tooltip').css('top', pageY - 20);
});
  pageX = e.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
  pageY = e.clientY + (document.body.scrollTop || document.documentElement.scrollTop);

とe.pageX、e.pageYではなく、こうする事でIE9以降でも無事にツールチップがマウスの軌跡についてくれるようになりましたよっとノシ
これで多分、問題ないと思いますけど。。。

いい加減IEは無くなってほしい物です。