ホーム >> 左脳Script >> Java Script >> マウス座標を正しく取得するには

マウス座標を正しく取得するには


再び座標取得の話。前回同様の内容で記事を書いたのが随分前だったように思いますが、あの時点で既に古い情報だったのかもしれません。

さて、今まで上手く動いてくれなかった escAway ですが、原因が判りました。Internet Explorer にて、正確なマウス座標が判らない為だったようです。エレメント座標取得には問題なし。

マウス座標を取得するスクリプト

うまく動かない原因を、見当違いの所を調査していた為、嵌っていたようです。

一般的にマウス座標を取得するスクリプトは、クロスブラウザ対策も含め以下のようになっています。

Internet Explorer の場合。

mouseX  =   document.body.scrollLeft    +   event.clientX;
mouseY  =   document.body.scrollTop     +   event.clientY;

Internet Explorer 以外、pageXプロパティ、pageYプロパティ、のあるブラウザ。

mouseX  =   e.pageX;
mouseY  =   e.pageY;

今回問題なのは、Internet Explorer のマウス座標。どうやら、ページのスクロール分が全く反映されていない様子。
document.body.scrollTop を監視すると、ページのスクロールに関わらず何故か0のままです。



DOCTYPE

調査の結果・・・IEの仕様(バグではないらしい)と判明!

要約すると、html に以下のような宣言をしていると、Internet Explorerでは標準準拠モードになり、document.body.scrollTop(scroll系他) が無効になる。という物。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

対策としてこの場合は、document.documentElement.scrollTopを使わなければならないようです。



対策コード

モードの判別でプロパティを分ける対策をしたコード。

var mouseX,mouseY;
if( undefined !== window.ActiveXObject  )   //  IE判別
{
    var __base__scroll__;
    if( document.compatMode=='CSS1Compat'   )   //  モード判別
    {
        __base__scroll__    =   document.documentElement;
        //  マウス座標イベント取得
        document.onmousemove    =   function(e)
        {
            mouseX  =   __base__scroll__.scrollLeft +   event.clientX;
            mouseY  =   __base__scroll__.scrollTop  +   event.clientY;
        };
    }
    else
    {
        //  マウス座標イベント取得
        document.onmousemove    =   function(e)
        {
            mouseX  =   document.body.scrollLeft    +   event.clientX;
            mouseY  =   document.body.scrollTop     +   event.clientY;
        };
    }
}
else
{
    //  マウス座標イベント取得
    document.onmousemove    =   function(e)
    {
        mouseX  =   e.pageX;
        mouseY  =   e.pageY;
    };
}
mouseX、mouseYにマウスの座標を反映出来る様になりました。



雑感

まさか DOCTYPE指定によるモードの差で、無効になるプロパティがあるとは思っていませんでした。まだまだクロスブラウザ対策で苦労しなければならない時代が続くのでしょうか。


それでも、Java Script の可能性を捨てきれないオレガイル。ザンギと友達になれる日を夢見て、今日も Java Script に精を出す。



トラックバック(0)

トラックバックURL: http://n-yagi.0r2.net/sanoupulurun/mt-tb.cgi/185

コメントする

ホーム >> 左脳Script >> Java Script >> マウス座標を正しく取得するには

アーカイブ

このブログ記事について

このページは、n-yagiが2009年7月 2日 19:37に書いたブログ記事です。

ひとつ前のブログ記事は「swfobject.js の expressInstall.swf 使用法」です。

次のブログ記事は「boidデモの記事」です。

最近のコンテンツはインデックスページで見られます。過去に書かれたものはアーカイブのページで見られます。

Creative Commons License
このブログはクリエイティブ・コモンズでライセンスされています。