JQuery erhalten relative Mausposition

Holen Sie sich die relative Position der Maus relativ zum Element in jQuery

Der folgende JQuery -Code -Snippet wird verwendet, um die relative Position des Mauszeigers zu erhalten. Diese Funktion nimmt die Element -ID und die aktuellen X- und Y -Koordinaten des Mauszeigers als Parameter über. Anschließend gibt es den relativen Abstand zwischen der aktuellen Position des Mauszeigers und dem angegebenen Element zurück.

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

Beispiel verwendet

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

});

FAQs über JQuery relativ zur Mausposition (FAQs)

Wie kann ich JQuery verwenden, um Mausposition zu erhalten, ohne Mausereignisse zu verwenden?

In JQuery werden Mausereignisse normalerweise verwendet, um die Mausposition zu erhalten. Wenn Sie jedoch die Maus Position erhalten möchten, ohne das Mausereignis zu verwenden, können Sie die .offset() -Methode verwenden. Diese Methode gibt die Offset -Koordinaten des ersten Elements im passenden Element, das relativ zum Dokument eingestellt ist, zurück. Hier ist ein einfaches Beispiel:

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

Wie kann ich JQuery verwenden, um die Mausposition in ein Element zu erhalten?

Um die Mausposition in ein Element zu erhalten, können Sie die .offset() -Methode mit den Eigenschaften des Ereignisobjekts pageX und pageY verwenden. Hier ist ein Beispiel:

$("#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);
});

Wie verwendet die mousemove() -Methode in jQuery?

Die

-Methode in mousemove() jQuery wird verwendet, um eine Ereignishandlerfunktion an das Ereignis mousemove oder das Ereignis auf einem Element auszulösen. Dieses Ereignis wird an das Element gesendet, wenn sich der Mauszeiger im Element bewegt. Es kann verwendet werden, um die Bewegung der Maus zu verfolgen und Operationen gemäß der Position der Maus auszuführen.

Wie kann ich JQuery verwenden, um die Position des Mauszeigers zu erhalten?

Sie können JQuery verwenden, um die Position des Mauszeigers mithilfe der Eigenschaften event.pageX und event.pageY zu erhalten. Diese Eigenschaften liefern Mauszeigerpositionen in Bezug auf die linken bzw. oberen Kanten des Dokuments.

Wie kann ich JQuery verwenden, um die Mausposition relativ zum Element zu finden?

Um die Mausposition relativ zum Element zu finden, können Sie die Position des Elements von der Position des Mauszeigers subtrahieren. Hier ist ein Beispiel:

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

Dies gibt Ihnen die Position des Mauszeigers relativ zum angegebenen Element.

Vorhandene Anpassungen des Codebeispiels, um das Problem klarer und leichter zu verstehen. Darüber hinaus ist der Text poliert, um ihn reibungsloser und natürlicher zu machen. x

Das obige ist der detaillierte Inhalt vonJQuery erhalten relative Mausposition. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!