08/10/26 10:50:05
半ば自己解決したので、報告します。Bが正解に近いという結論です。
これは何を持って正しい座標系とするかの問題なので答えなど存在しないとも言えそうです。
以下の考察では簡単のためスクロールは無いものとします。また、動作の確認にはIE7を使用しました。
●座標系を5つ定義します。
(1) (B) e.clientX - document.documentElement.clientLeftをx座標値とし、y座標値も同様に計算する座標系。この座標系で(x,y)の座標になる点をB:(x,y)のように書くことにします。以下同様。
(2) (A) e.clientX - document.documentElement.clientLeft - document.body.clientLeftをx座標値(ry A:(x,y)
(3) position:absoluteでtop:0px: left:0px;な点を(0,0)とする座標系。 ab:(x,y)
(4) e.clientX, e.clientYを座標値とする座標系。 cl:(x,y)
(5) 右クリックでコンテンツの右クリックメニューが出る最も左上端を(0,0)とする座標系。 con:(x,y)
●standard modeでは、
・cl:(2,2) = con:(2,2) = B:(0,0) = ab:(0,0)
・A:(0,0)はbodyのborderがある限り別の点。しかも何ら特徴のない点。
例えば、bodyのmargin-left-widthが10px, border-left-widthが20pxの時、A:(0,0)はbodyのボーダー内の点。
つまり、standard modeでは(A)のDHTMLクックブックの座標系は役に立ちません。
●quirks modeでは、
・cl:(0,0) = con:(0,0) = B:(0,0) ← bodyのborderの外辺であり、表示部の左上端。
・ab:(0,0) = A:(0,0) ← bodyのborderの内辺
bodyのborderが0pxなら両者は同じ点になります。
●以上のことから、「e.clientX, e.clientYの値からクライアント領域の左上端を(0,0)と見た座標系での値へと変換するには」、
Bの方法が適切だと考えられます。
Bの方法はやってることは簡単なことで、基本的にe.clientX/Yの値をそのまま使いますが、standard modeの時は2(document.documentElement.clientLeft/Topの値)を差し引いて補正します。