絶対的に位置する最も近い親要素 (オブジェクトがない場合はドキュメント) は左上です要素の角、y 軸座標の位置 | Mozilla および Safari |
|
例 1
以下では、複数のマウス座標属性を使用して、さまざまなブラウザーと互換性のあるマウス位置設計を実現する方法について説明します。
まず、screenX プロパティと screenY プロパティを見てみましょう。これら 2 つの属性はすべてのブラウザでサポートされており、最も好ましい属性と言えますが、その座標系はコンピュータ画面です。つまり、コンピュータ画面の左上隅が位置決めの原点になります。これは、ブラウザ ウィンドウをアクティブ スペースとして使用する Web ページには価値がありません。画面解像度、ブラウザ ウィンドウのサイズと位置が異なると、Web ページ上でマウスを配置することが困難になるためです。
2 番目に、ドキュメント オブジェクトが座標系として使用されている場合は、pageX 属性と pageY 属性を使用してブラウザ ウィンドウ内での位置を決定することを検討できます。これは、マウスの追従を設計する場合に良いアイデアです。次の要素は通常、ブラウザ ウィンドウ内で絶対的な位置に移動するためです。mousemove イベント ハンドラで、pageX および pageY 属性値をイベント ハンドラの上部と左に渡します。絶対に配置された要素。属性をスタイルするだけです。
IE イベント モデルは上記の属性をサポートしていないため、IE と互換性のあるメソッドを見つける必要があります。 clientX 属性と clientY 属性は、座標系としてウィンドウ オブジェクトに基づいており、IE イベント モデルはこれらをサポートしているため、これらを選択できます。ただし、ウィンドウなどのオブジェクトのスクロール バーのオフセットを考慮して、ウィンドウ オブジェクトに対するページ スクロールのオフセットも追加する必要があります。
var posX = 0, posY = 0;
var event = event || window.event;
if (event.pageX || event.pageY) {
posX = event.pageX;
posY = event.pageY;
} else if (event.clientX || event.clientY) {
posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}var posX = 0, posY = 0;
var event = event || window.event;
if (event.pageX || event.pageY) {
posX = event.pageX;
posY = event.pageY;
} else if (event.clientX || event.clientY) {
posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
} 上記のコードでは、まず pageX 属性と pageY 属性が存在するかどうかを確認し、存在する場合はその値を取得します。存在しない場合は、clientX 属性値と clientY 属性値を検出して取得し、document.documentElement オブジェクトと document.body オブジェクトのscrollLeft 属性値とscrollTop 属性値を追加して、異なるブラウザーで同じ座標値が取得されるようにします。 。
例 2
マウス位置コードをカプセル化します。設計アイデア: 通過した特定のオブジェクトとマウス ポインタに対する相対的なオフセットに従って、オブジェクトは節水動作に従うように命令できます。
最初にカプセル化関数を定義します。設計関数によって渡されるパラメータは、オブジェクト参照ポインタ、マウス ポインタを基準としたオフセット距離、およびイベント オブジェクトです。次に、カプセル化された関数は、イベント オブジェクトに基づいてマウスの座標値を取得し、そのオブジェクトを絶対位置に設定します (絶対位置の値は、マウス ポインターの現在の座標値です)。
カプセル化コードは次のとおりです:
var pos = function (o, x, y, event) { //鼠标定位赋值函数
var posX = 0, posY = 0; //临时变量值
var e = event || window.event; //标准化事件对象
if (e.pageX || e.pageY) { //获取鼠标指针的当前坐标值
posX = e.pageX;
posY = e.pageY;
} else if (e.clientX || e.clientY) {
posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}
o.style.position = "absolute"; //定义当前对象为绝对定位
o.style.top = (posY + y) + "px"; //用鼠标指针的y轴坐标和传入偏移值设置对象y轴坐标
o.style.left = (posX + x) + "px"; //用鼠标指针的x轴坐标和传入偏移值设置对象x轴坐标
}var pos = function (o, x, y, event) { //鼠标定位赋值函数
var posX = 0, posY = 0; //临时变量值
var e = event || window.event; //标准化事件对象
if (e.pageX || e.pageY) { //获取鼠标指针的当前坐标值
posX = e.pageX;
posY = e.pageY;
} else if (e.clientX || e.clientY) {
posX = event.clientX + document.documentElement.scrollLeft + document.body.scrollLeft;
posY = event.clientY + document.documentElement.scrollTop + document.body.scrollTop;
}
o.style.position = "absolute"; //定义当前对象为绝对定位
o.style.top = (posY + y) + "px"; //用鼠标指针的y轴坐标和传入偏移值设置对象y轴坐标
o.style.left = (posX + x) + "px"; //用鼠标指针的x轴坐标和传入偏移值设置对象x轴坐标
} カプセル化コードは以下でテストされます。ドキュメント オブジェクトのマウス移動イベント ハンドラーを登録し、マウス位置決めカプセル化関数を渡します。渡されるオブジェクトは dc6dce4a544fdca2df29d5ac0ea9906b 要素で、その位置はマウスの右下に (10,20) だけオフセットされます。ポインタ。 DOM イベント モデルはパラメーターの形式でイベント オブジェクトを渡すことを考慮して、呼び出し元の関数でイベント オブジェクトを渡すことを忘れないでください。
<div id="div1">鼠标追随</div>
<script>
var div1 = document.getElementById("div1");
document.onmousemove = function (event) {
pos (div1, 10, 20, event);
}
</script><div id="div1">鼠标追随</div>
<script>
var div1 = document.getElementById("div1");
document.onmousemove = function (event) {
pos (div1, 10, 20, event);
}
</script> 例 3
要素内のマウス ポインターの座標を取得する。これは、offsetX プロパティと offsetY プロパティを使用して実現できますが、Mozilla ブラウザではサポートされていません。 Mozilla ブラウザとの互換性を保つために、layerX 属性とlayerY 属性をオプションで使用できます。
デザイン コードは次のとおりです。
var event = event || window.event;
if (event.offsetX || event.offsetY) { //适用非Mozilla浏览器
x = event.offsetX;
y = event.offsetY;
} else if (event.layerX || event.layerY) { //兼容Mozilla浏览器
x = event.layerX;
y = event.layerY;
}var event = event || window.event;
if (event.offsetX || event.offsetY) { //适用非Mozilla浏览器
x = event.offsetX;
y = event.offsetY;
} else if (event.layerX || event.layerY) { //兼容Mozilla浏览器
x = event.layerX;
y = event.layerY;
} ただし、layerX 属性と LayerY 属性は、絶対的に配置された親要素。要素自体ではなく、参照オブジェクト。絶対的に配置された親要素がない場合は、ドキュメント オブジェクトが参照として使用されます。この目的を達成するには、スクリプトを使用して動的に追加するか、手動で追加し、要素の外層を囲む絶対配置の親要素を設計することができます。これにより、ブラウザーの互換性の問題を解決できます。要素間の距離によって生じる誤差を考慮するには、1 ピクセルまたは数ピクセルのオフセットを減算することが適切です。
完全な設計コードは次のとおりです:
<input type="text" id="text" />
<span style="position:absolute;">
<div id="div1" style="width:200px;height:160px;border:solid 1px red;">鼠标跟随</div>
</span>
<script>
var t = document.getElementById("text");
var div1 = document.getElementById("div1");
div1.onmousemove = function (event) {
var event = event || window.event; //标准化事件对象
if (event.offsetX || event.offsetY) {
t.value = event.offsetX + "" + event.offsetY;
} else if (event.layerX || event.layerY) {
t.value = (event.layerX-1) + "" + (event.layerY-1);
}
}
</script><input type="text" id="text" />
<span style="position:absolute;">
<div id="div1" style="width:200px;height:160px;border:solid 1px red;">鼠标跟随</div>
</span>
<script>
var t = document.getElementById("text");
var div1 = document.getElementById("div1");
div1.onmousemove = function (event) {
var event = event || window.event; //标准化事件对象
if (event.offsetX || event.offsetY) {
t.value = event.offsetX + "" + event.offsetY;
} else if (event.layerX || event.layerY) {
t.value = (event.layerX-1) + "" + (event.layerY-1);
}
}
</script> このアプローチにより、マウスの位置決めの問題を解決できます。要素内のポインタ。ただし、絶対配置された要素は要素の周囲にラップされるため、ページ全体の構造レイアウトが破壊されます。この方法は、人為的なアプローチにより構造レイアウトに混乱が生じないことを前提として検討することができる。
[推奨学習: JavaScript 上級チュートリアル]
