Heim >Web-Frontend >CSS-Tutorial >Wie erhalte ich mit jQuery genaue Mausklickkoordinaten relativ zu einem Zielelement?
Wie erhalte ich mit jQuery genaue Mausklickkoordinaten relativ zu einem Zielelement?
- Mary-Kate OlsenOriginal
- 2024-12-05 22:51:14637Durchsuche
Mausklickkoordinaten auf Zielelementen mit jQuery verstehen
Beim Umgang mit Klickereignissen auf HTML-Elementen mit jQuery ist es wichtig zu wissen, wie die Koordinaten der Maus genau abgerufen werden Zeiger relativ zum Zielelement. Lassen Sie uns dieses Thema anhand detaillierter Beispiele untersuchen und verdeutlichen.
Problemdiagnose
Betrachten Sie den folgenden Ereignishandler:
jQuery("#seek-bar").click(function(e){
var x = e.pageX - e.target.offsetLeft;
alert(x);
});
Das Ziel besteht darin, die Position des Mauszeigers relativ zu zu ermitteln das #seek-bar-Element im Moment des Klicks. Der bereitgestellte Code liefert jedoch möglicherweise falsche Ergebnisse.
Positionseigenschaften verstehen
1. event.pageX, event.pageY:
Diese Eigenschaften stellen die Koordinaten des Mauszeigers relativ zum gesamten Dokument bereit.
Ref: http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/
2. offset():
Diese Funktion gibt die Offset-Position (Abstand von der oberen linken Ecke der Seite) eines Elements innerhalb des enthaltenden Dokuments zurück.
Ref: http://api.jquery.com/offset/
3. position():
Diese Funktion gibt die Position des Elements (relativ zu seinem übergeordneten Element) innerhalb seines enthaltenden Dokuments zurück.
Ref: http://api .jquery.com/position/
Um das ursprüngliche Problem zu lösen, ist es wichtig, diese Positionseigenschaften und ihre beabsichtigte Verwendung zu berücksichtigen. In diesem Fall sollten wir die Funktion offset() anstelle von offsetLeft verwenden, um die Position des Mauszeigers relativ zur #seek-bar zu ermitteln.
Korrigierter Code:
jQuery("#seek-bar").click(function(e){
var x = e.pageX - $(this).offset().left;
alert(x);
});
Beispiel Demonstration
Um den Unterschied zwischen diesen Positionseigenschaften zu veranschaulichen, hier ein Beispiel-HTML-Snippet und entsprechender JavaScript-Code:
HTML
<body> <div>
JavaScript
$(document).ready(function (e) {
$('#A').click(function (e) { //Default mouse Position
alert(e.pageX + ' , ' + e.pageY);
});
$('#B').click(function (e) { //Offset mouse Position
var posX = $(this).offset().left,
posY = $(this).offset().top;
alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
});
$('#C').click(function (e) { //Relative ( to its parent) mouse position
var posX = $(this).position().left,
posY = $(this).position().top;
alert((e.pageX - posX) + ' , ' + (e.pageY - posY));
});
});
Durch Klicken auf diese Divs können Sie die einzelnen Elemente beobachten Ergebnisse basierend auf der verwendeten Positionseigenschaft.
Das obige ist der detaillierte Inhalt vonWie erhalte ich mit jQuery genaue Mausklickkoordinaten relativ zu einem Zielelement?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!