Wie erhalte ich präzise Klickkoordinaten relativ zu einem Element in jQuery?

Klickkoordinaten auf Zielelement mit jQuery abrufen

Beim Verarbeiten von Klickereignissen auf HTML-Elementen mit jQuery kann es zu falschen Ergebnissen kommen, wenn versucht wird, die Mausposition relativ zu zu ermitteln das Element. Dies könnte an einem Missverständnis der verfügbaren jQuery-Methoden liegen.

event.pageX und event.pageY

Diese Eigenschaften geben die Mausposition relativ zum Dokument an. Sie sind nicht spezifisch für das Zielelement.

offset()

Diese Methode gibt die Offset-Position eines Elements relativ zu seinem übergeordneten Element an. Sie wird häufig verwendet, um die Position des Elements auf der Seite zu bestimmen, gibt jedoch nicht die Mausposition relativ zum Element selbst an.

position()

Im Gegensatz zu offset() gibt diese Methode Folgendes an: die relative Position eines Elements in Bezug auf sein unmittelbares übergeordnetes Element. Es ist nützlich, um die Position eines Elements innerhalb eines inneren Containers zu ermitteln.

Beispiel

Um den Unterschied zwischen diesen Methoden zu veranschaulichen, betrachten Sie den folgenden HTML-Code:

<div>

Und der folgende JavaScript-Ereignishandler:

jQuery("#seek-bar").click(function(e) {
  // Incorrectly uses offset()
  var x = e.pageX - jQuery(this).offset().left;
  console.log(x);

  // Correctly uses position()
  var x = e.pageX - jQuery(this).position().left;
  console.log(x);
});

Wenn Sie auf die #seek-bar klicken, werden Sie feststellen, dass das erste Konsolenprotokoll falsche Ergebnisse liefert, weil es verwendet wird offset(), das die absolute Position des Elements auf der Seite angibt. Das zweite Konsolenprotokoll stellt jedoch mithilfe von position().

Das obige ist der detaillierte Inhalt vonWie erhalte ich präzise Klickkoordinaten relativ zu einem Element in jQuery?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!