DOM mouse eventの座標がカオスだ

Mouse position

マウスイベントが飛んでくるのはいい。だが、canvasにおいて、座標系がまるで使い物にならない。DOM level 2、level 3のEventにおける定義では、screenX/Yと、clientX/Yが使える。screenのコンピューターの画面全体における座標なので、あまり必要ない。clientの方は、ブラウザのウインドウ全体における座標だ。

欲しいのは、そのマウスイベントが発生したElement上での相対座標だ。これを求める方法は、W3Cの規格だけでは実装できない。

あるElementの左上の座標を求めるプロパティはある。しかし、そのElementの親Elementからの相対座標なので、結局、bodyまでさかのぼらなければならない。激しく面倒だ。

前回のcanvasを使ったコード、どうしてもすべてのブラウザをサポートする、workaroundの無いコードがかけない。現在、Operaでうまく動かない。どうも、Operaでは、ScrollTopやScrollLeftが0を返す。ベータバージョンを使っているからだろうか。とにかくブラウザ間の互換性の無さにだけはあきれ返る。

とりあえず、マウスイベントのclientXとclientYを、relativeな座標に直す関数を書いてみた。

function computeRelativePosition(event)
{
        var ret = { x : event.clientX, y : event.clientY + document.body.scrollTop } ;
        for ( var p = event.target ; p !== null ; p = p.offsetParent )
        {
                ret.x -= p.offsetLeft ;
                ret.y -= p.offsetTop ;
        }

        return ret ;
} ;