Heim >Web-Frontend >CSS-Tutorial >Wie erhalte ich Mausklickkoordinaten relativ zu einem Zielelement in jQuery?

Wie erhalte ich Mausklickkoordinaten relativ zu einem Zielelement in jQuery?

Linda Hamilton
Linda HamiltonOriginal
2024-11-16 09:32:03466Durchsuche

How to Get Mouse Click Coordinates Relative to a Target Element in jQuery?

Bestimmen von Klickkoordinaten auf Zielelement mit jQuery

Um die Mauskoordinaten relativ zum Zielelement beim Klicken zu erfassen, bietet jQuery mehrere Methoden, um genaue Ergebnisse zu erhalten.

event.pageX und event.pageY

Die Eigenschaften event.pageX und event.pageY stellen den Mauszeiger bereit Position relativ zum Dokument.

Element.offset()

Die Methode offset() ruft die Offset-Position des Elements innerhalb des Dokuments ab.

Element.position()

Die Methode position() bestimmt die relative Position eines Elements innerhalb seines übergeordneten Elements Container.

Demonstration

Bedenken Sie den folgenden JavaScript-Code:

jQuery("#seek-bar").click(function(e) {
    var posX = e.pageX - $(this).offset().left;
    var posY = e.pageY - $(this).offset().top;
    alert("X-coordinate: " + posX + "\nY-coordinate: " + posY);
});

Dieser Code berechnet und zeigt die genauen Klickkoordinaten relativ zum Zielelement an.

Beispiel-HTML

<div>

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

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn