Cubix

ボーダーのついたレイヤでe.layerXの挙動

2007.03.06

コード表示用のJavascriptを作っているところで躓いたわ

• e.layerX
  イベントが発生した座標を取得する

ページ上のあるレイヤーでオンマウスオーバーした時にどこで発生したかを知りたいわけである。
そのレイヤー自体にスタイルシートでボーダーをつけている場合、そのボーダーに乗った時点でイベントが発生する為、スクロール分が加算されない。
ボーダーの幅が1pxだったりする場合、素早くマウスを動かすとボーダーに乗った時点で判定されずにスクロール分が含まれていたり、ゆっくりマウスを動かすとボーダーで判定されて含まれて居なかったりムカツク挙動である。

さらに、スクロールバー領域で判定された場合スクロールバーの座標になるとか。

もうだめぽ…。

時間ないというのに、ちよ父AAのトレースとかし出すし…もうだめぽ。

さてどうしよう。

このためにボーダーの付いていない判定用レイヤにネストさせるのは嫌なので、他の対策を考えたいと思います。

この報告は追って。

テスト用コード置いておきます。

.viewcode
{
	margin: 20px;
	padding: 10px;
	width: 200px;
	height: 150px;
	overflow: auto;
	border: 5px solid #e7e7e7;
	background: #fff;
	white-space: pre;
	}

<textarea id="trace" rows="15" cols="60"></textarea>
<pre class="viewcode" onmouseover="eventTest(event, this);">
tesutotesutotesutotesutotesutotesutotesutotesutotesutotesuto
</pre>

function eventTest(e, obj)
{
	trace(e.layerX);
}
function trace(str)
{
	document.getElementById('trace').value += str+"\n";
}