jQuery获得相对鼠标位置

获取jQuery中鼠标相对于元素的相对位置

以下jQuery代码片段用于获取鼠标指针的相对位置。该函数接收元素ID以及鼠标指针当前的x和y坐标作为参数。然后，它返回鼠标光标当前位置与指定元素之间的相对距离。

function rPosition(elementID, mouseX, mouseY) {
  var offset = $('#'+elementID).offset();
  var x = mouseX - offset.left;
  var y = mouseY - offset.top;
  return {'x': x, 'y': y};
}

示例用法

jQuery(document).ready(function($) {

    // 获取鼠标指针当前的x和y坐标
    var X = $('body').offset().left;
    var Y = $('body').offset().top;
    mouseX = ev.pageX - X;
    mouseY = ev.pageY - Y;

    // 获取页面上相对于#eid元素的相对位置
    alert(rPosition('eid',mouseX,mouseY)); //注意此处将x,y更正为mouseX,mouseY

});

关于jQuery相对鼠标位置的常见问题解答 (FAQs)

如何在不使用鼠标事件的情况下使用jQuery获取鼠标位置？

在jQuery中，通常使用鼠标事件来获取鼠标位置。但是，如果您想在不使用鼠标事件的情况下获取鼠标位置，可以使用.offset()方法。此方法返回匹配元素集中第一个元素相对于文档的偏移坐标。这是一个简单的示例：

var position = $("#element").offset(); // 返回包含top和left属性的对象
console.log("元素位于：" + position.left + "," + position.top);

如何使用jQuery获取元素内的鼠标位置？

要获取元素内的鼠标位置，您可以将.offset()方法与事件对象的pageX和pageY属性结合使用。这是一个示例：

$("#element").mousemove(function(event) {
  var parentOffset = $(this).offset();
  var relX = event.pageX - parentOffset.left;
  var relY = event.pageY - parentOffset.top;
  console.log("X坐标：" + relX + " Y坐标：" + relY);
});

jQuery中的mousemove()方法有什么用？

jQuery中的mousemove()方法用于为mousemove事件附加事件处理程序函数，或在元素上触发该事件。当鼠标指针在元素内部移动时，此事件将发送到该元素。它可以用于跟踪鼠标的移动并根据鼠标的位置执行操作。

如何使用jQuery获取鼠标指针的位置？

您可以使用event.pageX和event.pageY属性使用jQuery获取鼠标指针的位置。这些属性分别提供相对于文档左边缘和上边缘的鼠标指针位置。

如何使用jQuery查找相对于元素的鼠标位置？

要查找相对于元素的鼠标位置，您可以从鼠标指针的位置减去元素的位置。这是一个示例：

$("#element").mousemove(function(event) {
  var x = event.pageX - $(this).offset().left;
  var y = event.pageY - $(this).offset().top;
  console.log("X坐标：" + x + " Y坐标：" + y);
});

这将为您提供相对于指定元素的鼠标指针位置。

对代码示例进行了细微的调整，使其更清晰易懂，并修正了示例用法中x和y变量未定义的问题，改为使用mouseX和mouseY。 此外，对文本进行了润色，使之更流畅自然。

以上是jQuery获得相对鼠标位置的详细内容。更多信息请关注PHP中文网其他相关文章！