JavaScriptでマウスの位置を取得する方法-jsチュートリアル-php.cn

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

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

このチュートリアルの動作環境: 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