Wie erhalte ich in jQuery korrekt Klickkoordinaten relativ zu einem Zielelement?

Identifizieren von Klickkoordinaten auf einem Zielelement in jQuery

Um die Position des Mauszeigers auf einem bestimmten HTML-Element beim Klicken zu bestimmen, können wir dies tun Nutzen Sie den jQuery-Ereignishandler. Allerdings ist kürzlich ein Problem aufgetreten, bei dem falsche Ergebnisse zurückgegeben werden.

Korrigieren falscher Positionierungsergebnisse

Der ursprünglich bereitgestellte Code versuchte, die Klickkoordinaten relativ zu berechnen Zielelement mithilfe der Eigenschaften event.pageX und event.target.offsetLeft. Es wurde jedoch festgestellt, dass diese Methode keine genauen Ergebnisse liefert.

Ereigniskoordinaten verstehen

Es ist wichtig, zwischen zwei Arten von Mauszeigerkoordinaten zu unterscheiden:

• Relativ zum Dokument: Wird mithilfe von event.pageX und event.pageY ermittelt, die die Position des Zeigers relativ zum gesamten Dokument angeben.
• Relativ zum Element: Erfordert die Verwendung der offset()-Methode, um die Position des Elements innerhalb des Dokuments zu bestimmen, gefolgt vom Subtrahieren der Offsetwerte von den Zeigerkoordinaten.

Position() vs Offset()

In diesem Zusammenhang ist die Methode position() nicht geeignet, da sie die Position des Elements relativ zu seinem übergeordneten Container berechnet, was in diesem Szenario nicht relevant ist. Die offset()-Methode hingegen liefert die Position des Elements relativ zum Dokument und ermöglicht es uns, die Klickkoordinaten genau zu berechnen.

Verbesserter Code

Zu Um das Problem zu beheben, wurde der Code überarbeitet, um die Klickkoordinaten relativ zum Zielelement korrekt zu bestimmen:

jQuery("#seek-bar").click(function(e){
    var offset = $(this).offset();
    var x = e.pageX - offset.left;
    var y = e.pageY - offset.top;
    alert(x + ", " + y); 
});

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