JavaScriptでポインターの位置を取得する方法を教えます

JavaScript でポインターの位置を取得する方法は、イベントオブジェクトの pageX と pageY、または clientX と clientY プロパティを使用し、scrollLeft と scrollTop プロパティと連携して、ポインターの位置を計算します。

この記事の動作環境: Windows 10 システム、JavaScript 1.8.5、ThinkPad T480 コンピューター。

ページ上のポインターの位置を取得するには、イベントオブジェクトの pageX と pageY、または clientX と clientY (IE 互換) プロパティを使用できます。また、scrollLeft と scrollTop プロパティと連携して、ページ上のマウスポインターの位置を計算する必要があります。

//マウス ポインターのページ位置を取得します //パラメータ: e は現在のイベント オブジェクトを表します //戻り値: ページに対するマウスの座標をオブジェクト形式 (x, y) で返します

関数 getMP(e) {

    var e = e || window.event;

    戻る {

        x : e.pageX || e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft)、

        y : e.pageY || e.clientY + (document.documentElement.scrollTop || document.body.scrollTop)

    }

}

pageX および pageY イベント属性は IE ブラウザではサポートされておらず、clientX および clientY イベント属性は Safari ブラウザではサポートされていないため、異なるブラウザとの互換性を保つためにこれらを混在させることができます。 Quirks モードでは、body 要素がページ領域を表し、html 要素は非表示になりますが、標準モードでは、html 要素がページ領域を表し、body 要素は独立したページ要素にすぎないため、これら 2 つの解析方法は互換性がある必要があります。

次の例は、上記の拡張機能 getMP() を呼び出して、ドキュメント内のマウスポインターの現在の位置を取得する方法を示しています。

<body style="width:2000px;height:2000px;">
    <textarea id="t" cols="15" rows="4" style="position:fixed;left:50px;top:50px;"></textarea>
</本文>
<スクリプト>
    var t = document.getElementById("t");
    document.onmousemove = function(e){
        var m = getMP(e);
        t.value = "mouseX = " + mx + "\n" + "mouseY = " + my
    }
</スクリプト>

デモンストレーション効果は以下のとおりです。

ポインタの相対位置を取得する

offsetX と offsetY または layerX と layerY を使用して、マウスポインターの、それを含むボックスに対するオフセット位置を取得します。 offsetLeft プロパティと offsetTop プロパティを使用して、配置包含ボックス内の要素のオフセット座標を取得し、layerx プロパティ値を使用して offsetLeft プロパティ値を減算し、layery プロパティ値を使用して offsetTop プロパティ値を減算すると、要素内のマウスポインターの位置を取得できます。

//要素内のマウスポインターの位置を取得します //パラメータ: e は現在のイベントオブジェクトを表し、o は現在の要素を表します //戻り値: 相対座標オブジェクトを返します function getME (e, o) {

    var e = e || window.event;

    戻る {

        x : e.offsetX || (e.layerX - o.offsetLeft)、

        y : e.offsetY || (e.layerY - o.offsetTop)

    }

}

実際には、上記の機能には次の 2 つの問題があります。

Mozilla Type と Safari は、要素の境界外壁の左上隅を参照ポイントとして使用します。
他のブラウザでは、要素の境界の内壁の左上隅を座標の原点として使用します。

境界線がマウスの位置に与える影響を考慮すると、要素の境界線が非常に広い場合は、境界線がマウスの位置に与える影響を排除する方法を検討する必要があります。ただし、境界線のスタイルが異なるため、デフォルトの幅は 3 ピクセルとなり、要素の境界線の実際の幅を取得するのが難しくなります。現在の要素の境界線の幅を決定するには、さらに条件を設定する必要があります。

例

要素内のマウスポインターの位置を取得するための改良された拡張機能は次のとおりです。

//要素内のマウスポインターの位置を完全に取得します //パラメータ: e は現在のイベントオブジェクト、o は現在の要素を表します //戻り値: 要素に対するマウスの座標位置を返します。x は x 軸のオフセット距離、y は y 軸のオフセット距離を表します function getME(e, o){

    var e = e || window.event;

    // 要素の左境界線の幅を取得します // getStyle() 拡張関数を呼び出して境界線スタイルの値を取得し、数値に変換してみます。変換が成功したら、値を割り当てます。

    // それ以外の場合は、境界線スタイルが定義されているかどうかを判断します。境界線スタイルが定義されていて、値が none でない場合は、境界線の幅がデフォルト値の 3 ピクセルであることを意味します。

    //境界線スタイルが定義されておらず、幅の値が自動の場合、境界線の幅は 0 になります

    var bl = parseInt(getStyle(o, "borderLeftWidth")) || ((o.style.borderLeftStyle && o.style.borderLeftStyle != "none" )? 3 : 0);

    // 要素の上部境界線の幅を取得します。設計の考え方は、左境界線を取得する場合と同じです。var bt = parseInt(getStyle(o, "borderTopWidth")) || ((o.style.borderTopStyle && o.style.borderTopStyle !="none" ) ? 3 : 0);

    var x = e.offsetX || (e.layerX - o.offsetLeft - bl); // 一般的なブラウザのマウス オフセット値 // Mozilla ブラウザと互換性があり、境界線の幅を引いた値 var y = e.offsetY || (e.layerY - o.offsetTop - bt); // 一般的なブラウザのマウス オフセット値 // Mozilla ブラウザと互換性があり、境界線の幅を引いた値 var u = navigator.userAgent; // ブラウザのユーザー データを取得します if( (u.indexOf("KHTML") > - 1) ||(u.indexOf("Konqueror") > - 1) || (u.indexOf("AppleWebKit") > - 1)

    ){ // Safari ブラウザの場合は、境界線効果を減算します x -= bl; y -= bt;

    } return { // 要素の境界の内壁の左上隅を位置決めの原点として、さまざまなブラウザと互換性のあるマウス位置オブジェクトを返します。x: x、y: y

    }  

}

デモンストレーション効果は以下のとおりです。

推奨学習: JavaScript ビデオチュートリアル

これで、JavaScript でポインターの位置を取得する方法についての記事は終了です。js ポインターの位置の詳細については、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: