JavaScriptでマウスの位置を取得する方法

マウス位置を取得するための JS メソッド: 1. clientX および clientY 属性を使用する; 2. offsetX および offsetY 属性を使用する; 3. pageX および pageY 属性を使用する; 4. screenX および screenY 属性を使用する; 5. LayerX および screenY 属性を使用するレイヤーY属性。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript では、イベントが発生したとき、マウスの位置を取得することが非常に重要なイベントになります。ブラウザーの互換性がないため、次の表に示すように、ブラウザーが異なると、それぞれのイベント オブジェクトに異なる属性が定義されます。これらの属性はマウス ポインタの座標をピクセル値で定義しますが、異なる座標系を参照するため、マウスの位置を正確に計算するのは困難です。

#プロパティとその互換性プロパティ説明互換性#clientXclientYoffsetX offsetYpageX#pageYドキュメント オブジェクト (ドキュメント ウィンドウなど) の左上隅を原点として使用し、 y 軸座標すべてのブラウザ、IE と互換性なしscreenXコンピュータ画面の左上隅が原点であり、 x 軸座標の配置 すべてのブラウザscreenYコンピュータ画面の左上隅を原点とし、y 軸座標の配置すべてのブラウザlayerX最も近い絶対的に配置された親要素 (そうでない場合は、ドキュメント オブジェクト) の左上隅が、次の位置にある要素です。 X 軸座標 Mozilla および SafarilayerY絶対的に位置する最も近い親要素 (オブジェクトがない場合はドキュメント) は左上です要素の角、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轴坐标
}

カプセル化コードは以下でテストされます。ドキュメント オブジェクトのマウス移動イベント ハンドラーを登録し、マウス位置決めカプセル化関数を渡します。渡されるオブジェクトは

要素で、その位置はマウスの右下に (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 上級チュートリアル]

ブラウザ ウィンドウの左上隅を原点として、X 軸座標を配置します。	すべてのブラウザ、Safari とは互換性がありません
ブラウザ ウィンドウの左上隅を原点として、y 軸座標を配置します	すべてのブラウザ、Safari とは互換性がありません
現在のイベントのターゲット オブジェクトの左上隅を原点として、X 軸座標を配置します。	すべてのブラウザ、Mozilla とは互換性がありません
現在のイベントのターゲット オブジェクトの左上隅を原点として、y 軸座標を配置します	すべてのブラウザ、Mozilla とは互換性がありません
ドキュメント オブジェクト (ドキュメント ウィンドウなど) の左上隅を原点として、X 軸座標を配置します	すべてのブラウザ、IE

以上がJavaScriptでマウスの位置を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。