jQueryでマウスの位置座標を取得する方法-HTMLの知識-php.cn

jQueryでマウスの位置座標を取得する方法

藏色散人

リリース： 2018-12-27 10:57:42

オリジナル

13061 人が閲覧しました

jq は、マウスの現在位置座標をリアルタイムで取得します。これは、jQuery のevent.pageX とevent の 2 つの属性メソッドを通じて実現できます。 .pageY。 jQueryのevent.pageXを使用すると、ドキュメントの左端を基準としたマウスの位置を見つけることができ、event.pageYを使用して、ドキュメントの上端を基準としたマウスの位置を見つけることができます。

jQueryでマウスの位置座標を取得する方法

以下では、マウスの位置座標を取得する jq メソッド を具体的なコード例に基づいて紹介します。

コード例は次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jq获取鼠标位置坐标示例</title>
    <style type="text/css">
 *{
            margin: 0;
 }
        html, body{
            height:100%;
 }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
 $(function() {
            $("body").mousemove(function(event){
                var relPageCoords = "(" + event.pageX + "," + event.pageY + ")";
 $(".mouse-cords").text(relPageCoords);
 });
 });
 </script>
</head>
<body>
<p>当前鼠标的坐标为： <strong class="mouse-cords"></strong></p>
</body>
</html>

ログイン後にコピー

mousemove()このメソッドは、マウスポインターが指定された要素内を移動すると、mousemove イベントが発生するか、または実行するmousemoveイベントが発生します。 (上記のコードでは、関数のパラメーターイベントは、マウスの位置情報を提供するために使用されるオブジェクトに相当します。)

event.pageX プロパティは、マウスポインターの位置を返します。ドキュメントの端の左側を基準にします。 event.pageY プロパティは、ドキュメントの上端を基準としたマウスポインターの位置を返します。

text() メソッドは、選択した要素のテキストコンテンツを設定または返します。 (ここでの強力なタグは、出力マウス座標値を表示するために使用されます)

効果は次のとおりです:

jQueryでマウスの位置座標を取得する方法