ホームページ > 記事 > 毎日のプログラミング > jQueryでマウスの位置座標を取得する方法
jQueryでマウスの位置座標を取得する方法
- 藏色散人オリジナル
- 2018-12-21 14:57:0313037ブラウズ
jq は、マウスの現在位置座標をリアルタイムで取得します。これは、jQuery のevent.pageX とevent の 2 つの属性メソッドを通じて実現できます。 .pageY。 jQueryのevent.pageXを使用すると、ドキュメントの左端を基準としたマウスの位置を見つけることができ、event.pageYを使用して、ドキュメントの上端を基準としたマウスの位置を見つけることができます。
以下では、マウスの位置座標を取得する 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() メソッドは、選択した要素のテキスト コンテンツを設定または返します。 (ここでの強力なタグは、出力マウス座標値を表示するために使用されます)
効果は次のとおりです:
# 注:
1. 通常、event.pageX プロパティとevent.pageY プロパティは一緒に使用されます。 2. ユーザーがマウスを 1 ピクセル移動すると、mousemove イベントが発生します。すべてのmousemoveイベントを処理すると、システム リソースが消費されます。このイベントは慎重にご利用ください。 この記事は、jq がマウスの現在位置座標をリアルタイムに取得する方法について説明したもので、困っている友人の役に立てば幸いです。以上がjQueryでマウスの位置座標を取得する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。