Web アプリケーションのページで、マウスの位置に奇妙な問題が発生しています。ページ上の特定の要素の位置は、レンダリングされるブラウザーに関係なく同じになると思いました。サーバーで実行される画面キャプチャ機能でクライアントからの位置の値を使用したいと考えていました。
しかし、私が見ているのは、ページの一部を選択するたびに、上と左の位置がブラウザーに対して変化するということです。JavaScriptのプロパティをいくつか使ってブラウザの上と左をテストしましたが、固定位置の左と上はブラウザによって違うようです(数ピクセルの違い)。
// Detect if the browser is IE or not.
// If it is not IE, we assume that the browser is NS.
var IE = document.all ? true : false;
// If NS -- that is, !IE -- then set up for mouse capture
if (!IE) document.captureEvents(Event.MOUSEMOVE);
// Set-up to use getMouseXY function onMouseMove
document.onmousemove = getMouseXY;
// Temporary variables to hold mouse x-y pos.s
var tempX = 0;
var tempY = 0;
// Main function to retrieve mouse x-y pos.s
function getMouseXY(e) {
if (!e) e = window.event;
if (e.pageX || e.pageY) {
tempX = e.pageX;
tempY = e.pageY;
} else if (e.clientX || e.clientY) {
tempX = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
tempY = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
}
// catch possible negative values in NS4
if (tempX < 0) {
tempX = 0;
}
if (tempY < 0) {
tempY = 0;
}
// show the position values in the form named Show
// in the text fields named MouseX and MouseY
document.Show.clientX.value = e.clientX;
document.Show.clientY.value = e.clientY;
document.Show.pageX.value = e.pageX;
document.Show.pageY.value = e.pageY;
document.Show.scrollLeft.value = document.body.scrollLeft;
document.Show.scrollTop.value = document.body.scrollTop;
document.Show.MouseX.value = tempX;
document.Show.MouseY.value = tempY;
return true;
}html {
font-family:arial;
font-size:12px;
margin:0px;
padding:0px;
}<body>
<br/>
<br/>
<br/>
<br/> <span style="cursor:pointer;background:red;">.</span>
<div style="position:absolute;top:200px;left:200px;width:800px;height:800px;">
<form name="Show">
<input type="text" name="clientX" value="0" size="8">e.clientX
<br>
<input type="text" name="clientY" value="0" size="8">e.clientY
<br>
<input type="text" name="pageX" value="0" size="8">e.pageX
<br>
<input type="text" name="pageY" value="0" size="8">e.pageY
<br>
<input type="text" name="scrollLeft" value="0" size="8">scrollLeft
<br>
<input type="text" name="scrollTop" value="0" size="8">scrollTop
<br>
<input type="text" name="MouseX" value="0" size="8">Left
<br>
<input type="text" name="MouseY" value="0" size="8">Top
<br>
</form>
</div>
</body>各種ブラウザで赤枠にカーソルを合わせるとマウストップと左が返ってきますのでご覧ください。
異なるブラウザーが異なる上/左の値を返すのはなぜですか? これは、すべてのブラウザーで同じ値を返す必要があります。誰かがこの動作についての洞察を提供し、この問題を回避できる方法を提案できれば素晴らしいことです. 前もって感謝します。