博客

如何在jQuery中获得鼠标指针的位置

  • Post category:jquery

要在jQuery中获取鼠标指针的位置，可以使用event.pageX和event.pageY属性。以下是使用jQuery获取鼠标指针位置的完整攻略：

步骤一：创建HTML结构

首先需要创建包含鼠标指针位置的HTML结构。以下是一个例子：

<!DOCTYPE html>
<html>
<head>
  <title>Mouse Pointer Position</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <div id="container">
    <p>Move mouse over this div to get the mouse pointer position:</p>
  </div>
  <p id="position"></p>
  <script src="script.js"></script>
</body>
</html>

在上述例子中，我们创建了一个包含一个<div>元素和一个<p>元素的HTML结构。我们在<head>标签中引入了jQuery库，并在<body>标签中引入了一个名为script.js的JavaScript文件。

步骤二：添加jQuery代码

接下来，需要一些jQuery代码来获取鼠标指针的位置。以下是一个示例：

$(function() {
  $("#container").on("mousemove", function(event) {
    var x = event.pageX - $(this).offset().left;
    var y = event.pageY - $(this).offset().top;
    $("#position").text("Mouse pointer position: " + x + ", " + y);
  });
});

在上述示例中，我们使用on()方法在<div>元素上添加一个mousemove事件监听器。当用户将鼠标移动到<div>元素上时，事件监听器将使用event.pageX和event.pageY属性获取鼠标指针的位置。我们还使用$(this).offset().left和$(this).offset().top方法获取<div>元素的左上角相对于文档的位置。最后，我们使用text()方法将鼠标指针的位置显示在<p>元素中。

示例二：使用event.clientX和event.clientY属性

除了使用event.pageX和event.pageY属性，还可以使用event.clientX和event.clientY属性来获取鼠标指针的位置。以下是一个示例：

$(function() {
  $("#container").on("mousemove", function(event) {
    var x = event.clientX - $(this).offset().left;
    var y = event.clientY - $(this).offset().top;
    $("#position").text("Mouse pointer position: " + x + ", " + y);
  });
});

在上述示例中，我们使用event.clientX和event.clientY属性获取鼠标指针的位置。我们还使用$(this).offset().left和$(this).offset().top方法获取<div>元素的左上角相对于文档的位置。最后，我们使用text()方法将鼠标指针的位置显示在<p>元素中。

无论是使用event.pageX和event.pageY属性还是event.clientX和event.clientY属性，我们都可以在jQuery中获取鼠标指针的位置。我们可以使用on()方法在元素上添加mousemove事件监听器，并使用event.pageX和event.pageY属性或event.clientX和event.clientY属性获取鼠标指针的位置。

Tags: