JavaScriptでポインタの位置を取得する方法-jsチュートリアル-php.cn

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

王林

リリース： 2021-10-25 14:47:24

オリジナル

2778 人が閲覧しました

ポインタの位置を取得する Javascript メソッド: イベントオブジェクトの pageX および pageY、または clientX および clientY 属性を使用し、scrollLeft およびscrollTop 属性と連携して、ポインタの位置を取得します。計算された。

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

#この記事の動作環境: Windows10 システム、JavaScript 1.8.5、thinkpad t480 コンピューター。

ページ内のポインターの位置を取得するには、イベントオブジェクトの pageX および pageY、または clientX および clientY (IE と互換) プロパティを使用できます。スクロールトッププロパティを使用すると、ページ上のマウスポインターの位置を計算できます。

//获取鼠标指针的页面位置
//参数：e表示当前事件对象
//返回值：返回鼠标相对页面的坐标，对象格式（x，y）
function getMP (e) {
    var e = e || window.event;
    return {
        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 ブラウザではサポートされていないため、異なるブラウザと互換性を持たせるためにこれらを混合できます。変なモードでは、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>
</body>
<script>
    var t = document.getElementById("t");
    document.onmousemove = function(e){
        var m = getMP(e);
        t.value ="mouseX = " + m.x  + "\n" + "mouseY = " + m.y
    }
</script>

ログイン後にコピー

デモンストレーションの効果は次のとおりです:

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

ポインターの相対位置を取得します

offsetX と offsetY または LayerX と LayerY を使用します。マウスポインタの相対位置を取得するには、含まれているボックスのオフセット位置を配置します。 offsetLeft 属性と offsetTop 属性を使用して、位置決めを含むボックス内の要素のオフセット座標を取得し、layerx 属性値から offsetLeft 属性値を引いた値を使用し、layery 属性値から offsetTop 属性値を引いた値を使用すると、次のようになります。要素内のマウスポインタの位置。

//获取鼠标指针在元素内的位置
//参数：e表示当前事件对象，o表示当前元素
//返回值：返回相对坐标对象
function getME (e, o) {
    var e = e || window.event;
    return {
        x : e.offsetX || (e.layerX - o.offsetLeft),
        y : e.offsetY || (e.layerY - o.offsetTop)
    }
}

ログイン後にコピー

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

Mozilla タイプと Safari ブラウザでは、要素境界の外壁の左上隅が次のように使用されます。基準点。
他のブラウザでは、要素の境界線の内壁の左上隅が座標原点として使用されます。

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

例

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

//完善获取鼠标指针在元素内的位置
//参数：e表示当前事件对象，o表示当前元素
//返回值：返回鼠标相对元素的坐标位置，其中x表示x轴偏移距离，y表示y轴偏移距离
function getME(e, o){
    var e = e || window.event;
    //获取元素左侧边框的宽度
    //调用getStyle()扩展函数获取边框样式值，并尝试转换为数值，如果转换成功，则赋值。
    //否则判断是否定义了边框样式，如果定义边框样式，且值不为none，则说明边框宽度为默认值，即为3像素。
    //如果没有定义边框样式，且宽度值为auto，则说明边框宽度为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でポインタの位置を取得する方法