用 javascript 获取当页面上鼠标（光标）位置

可以通过监听鼠标移动事件，获取鼠标相对于页面的坐标来获取当前光标位置。具体代码如下：

document.addEventListener('mousemove', function(event) {
  var x = event.pageX; // 鼠标相对于文档左边缘的横坐标
  var y = event.pageY; // 鼠标相对于文档上边缘的纵坐标
  console.log('X坐标：' + x + ', Y坐标：' + y);
});

这样，在鼠标移动时，就会在控制台输出当前光标位置的坐标信息。

相关问题

html 跟随鼠标光标移动的div

要实现跟随鼠标光标移动的 div，可以使用 CSS 和 JavaScript 来完成。

首先，我们需要将 div 的位置设置为绝对定位，并且将其 z-index 属性设置为更高的值，以确保它始终处于页面上方。

然后，我们可以使用 JavaScript 的 mousemove 事件来获取鼠标的坐标，并将 div 的位置设置为鼠标的坐标。

具体实现代码如下：

HTML 代码：

<div id="followDiv">跟随鼠标光标移动的 div</div>

CSS 代码：

#followDiv {
  position: absolute;
  z-index: 9999;
}

JavaScript 代码：

var followDiv = document.getElementById('followDiv');

window.addEventListener('mousemove', function(e) {
  var x = e.clientX;
  var y = e.clientY;
  followDiv.style.left = x + 'px';
  followDiv.style.top = y + 'px';
});

这样就可以实现一个跟随鼠标光标移动的 div 了。

javascript jquery 该区域可以有一个活动矩形（另外用边框颜色突出显示，您可以在样式表中设置一个额外的类，例如， ）。 当鼠标光标在一个矩形上按下时，该块变为活动状态（它被分配给给定的类），而先前的活动矩形（如果有）变为非活动状态（该类被“删除”）。选择 如果用户单击共享区域，活动属性将从活动矩形中重置。编写代码

下面是一个用 jQuery 实现的示例代码，实现了您提出的功能：

HTML 代码：

<div id="rectangle-container">
  <div class="rectangle"></div>
  <div class="rectangle"></div>
  <div class="rectangle"></div>
</div>

CSS 代码：

.rectangle {
  width: 100px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
}

.active {
  border-color: red;
}

JavaScript 代码：

$(document).ready(function() {
  var activeRectangle = null; // 初始化活动矩形为 null

  // 当鼠标按下时，将当前矩形设为活动矩形
  $('#rectangle-container').on('mousedown', '.rectangle', function() {
    if (activeRectangle) {
      activeRectangle.removeClass('active'); // 将先前的活动矩形设为非活动状态
    }
    $(this).addClass('active'); // 将当前矩形设为活动矩形
    activeRectangle = $(this);
  });

  // 当用户单击共享区域时，将活动属性从活动矩形中重置
  $('body').click(function(event) {
    if (!$(event.target).closest('#rectangle-container').length) {
      if (activeRectangle) {
        activeRectangle.removeClass('active');
        activeRectangle = null;
      }
    }
  });
});

代码解释：

1. 首先，我们在 HTML 中创建了一个包含若干个矩形的容器，每个矩形都有一个类名为 `rectangle`。我们还定义了一个边框颜色为红色的类名为 `active`，用于表示活动矩形。

2. 然后，我们在 jQuery 的 `ready` 函数中编写了代码，用于实现您提出的功能。

3. 首先，我们定义了一个变量 `activeRectangle`，用于存储当前的活动矩形。初始时，它被设为 `null`。

4. 然后，我们使用 jQuery 的 `on` 函数，为矩形容器绑定了一个 `mousedown` 事件，当鼠标按下时触发。我们使用 `event.target` 来获取当前被按下的矩形，并将其设为活动矩形。如果先前已经有活动矩形存在，我们需要将其设为非活动状态（即移除 `active` 类），然后将当前矩形设为活动矩形，并将其存储在 `activeRectangle` 变量中。

5. 最后，我们使用 jQuery 的 `click` 函数，为整个页面绑定了一个 `click` 事件。当用户单击页面上除矩形容器外的任何地方时，我们检查当前是否存在活动矩形。如果有，我们将其设为非活动状态，并将 `activeRectangle` 变量设为 `null`，从而重置活动属性。

希望这个示例能够帮助您理解如何实现您提出的功能。