獲取jQuery中鼠標相對于元素的相對位置

以下jQuery代碼片段用于獲取鼠標指針的相對位置。該函數(shù)接收元素ID以及鼠標指針當前的x和y坐標作為參數(shù)。然后，它返回鼠標光標當前位置與指定元素之間的相對距離。

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

});

關(guān)于jQuery相對鼠標位置的常見問題解答 (FAQs)

如何在不使用鼠標事件的情況下使用jQuery獲取鼠標位置？

在jQuery中，通常使用鼠標事件來獲取鼠標位置。但是，如果您想在不使用鼠標事件的情況下獲取鼠標位置，可以使用.offset()方法。此方法返回匹配元素集中第一個元素相對于文檔的偏移坐標。這是一個簡單的示例：

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

如何使用jQuery獲取元素內(nèi)的鼠標位置？

要獲取元素內(nèi)的鼠標位置，您可以將.offset()方法與事件對象的pageX和pageY屬性結(jié)合使用。這是一個示例：

$("#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事件附加事件處理程序函數(shù)，或在元素上觸發(fā)該事件。當鼠標指針在元素內(nèi)部移動時，此事件將發(fā)送到該元素。它可以用于跟蹤鼠標的移動并根據(jù)鼠標的位置執(zhí)行操作。

如何使用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);
});

這將為您提供相對于指定元素的鼠標指針位置。

對代碼示例進行了細微的調(diào)整，使其更清晰易懂，并修正了示例用法中x和y變量未定義的問題，改為使用mouseX和mouseY。 此外，對文本進行了潤色，使之更流暢自然。

以上是jQuery獲得相對鼠標位置的詳細內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！