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中文網其他相關文章！