Wie finde ich die Mausposition?
Um die Mausposition mit Javascript zu ermitteln, kann man folgende Funktion verwenden.
function mouse_pos(e) { if(!e) e = window.event; var body = (window.document.compatMode && window.document.compatMode == "CSS1Compat") ? window.document.documentElement : window.document.body; return { // Position im Dokument top: e.pageY ? e.pageY : e.clientY + body.scrollTop - body.clientTop, left: e.pageX ? e.pageX : e.clientX + body.scrollLeft - body.clientLeft }; } |
Rückgabe:
.top / .left - Position im Dokument
Beispiel
Javascript
Das Skript dazu sieht so aus:
var on = false; function Start(e){ if(on) { window.document.onmousemove = null; e.value ='Start'; }else { window.document.onmousemove = showMousePos; e.value ='Stopp'; } on = !on; } function showMousePos(e){ var p = mouse_pos(e); for(var i in p) { document.forms['maus_pos'].elements[i].value = p[i]; } } |
ähnliche Artikel
- 18. November 2011 -- LED Editor (1)
LED Scroller Chareditor Dieses Skript dient zum...
- 13. Mai 2009 -- String Erweiterungen (5)
Eine der Eigenschaften von Javascript, die sie von...
- 29. April 2009 -- Online Molmassen Rechner (29)
Ein kleines Javascript aus der Welt der Chemie. Der...
Comments (14)
19730 mal gelesen.
19730 mal gelesen.
14 Kommentare
direkt zum Formular »
Seiten:
23. März 2008: 2:47
Hallo für mich ist nicht einsehbar wofür man die Mausposition braucht. Ist das um in einem eingebetten Bild oder an einer Textstelle die nötige Pixelzahl von oben und von der Seite zu erhalten, um dort einen tooltipp oder onmouse Befehl zu positionieren? Mhm, wäre schön eine Antwort zu erhalten. Mfg, Johannes T.
5. April 2008: 9:50
Genau das hab ich gesucht!!!!!!! Danke!!
Da ich zwar im Mozilla über pageX usw. Die relative Pos. der Mouse vom Doc bestimmen konnte das aber nicht mit dem IE funktioniert hat. Aber mit dem script klappt es.
Also weiter so super sache ;-)
20. August 2008: 2:15
Im Gegensatz zu Johannes wüsste ich ein paar Beispiele, wofür man die Mausposition braucht…
Aber egal. Was mir aufgefallen ist, dass im MS IE die Mausposition nicht mit der Position im Dokument übereinstimmt!? Irgendwie ist sie 2 Pixel daneben. Versuch doch mal, die linke-oberste weiße Ecke im Dokument anzuklicken. Kann man das irgendwie sinnvoll abfangen?
evt.pageX und Y liefern bei den anderen Browsern vernünftige Werte.
Gruss
H.
12. März 2009: 10:18
nettes script, leider ist der code oben falsch, was im IE zu problemen führt !
im return darf hinter „body.clientLeft“ KEIN Komma stehen.
return {
// Position im Dokument
top: e.pageY ? e.pageY : e.clientY + body.scrollTop – body.clientTop,
left: e.pageX ? e.pageX : e.clientX + body.scrollLeft – body.clientLeft,
};
12. März 2009: 13:12
Nur im IE, aber du hast natürlich vom Prinzip her recht. Ich hab’s geändert, Danke.
12. Oktober 2009: 19:34
Super, vielen dank^^
Ich brauche die Position des Mauszeigers z.B. für mein neues Browsergame, an dem ich gerade Programmiere.
@Johannes
Du fragst für was man die Mauszeigerposition brauchen könnte? Das meinst du doch nicht ernst? Für was braucht man Formulare? Für was eine ermittlung welche Taste man drückt? Um mit dem Benutzer der seite Interagieren zu können natürlich!!! Aber wenn der kein Hirn hat wie in deinem Fall, dann braucht man die Position natürlich nicht, den dann ist klar das du nichts damit anfangen kannst.
Gruss
Stefan
28. Juli 2010: 13:05
Auch danke von mir.
@Johannes: Ein paar Anwendungsbeispiele: Drag’n’Drop, Fenster zeiehen, wie bei Windows aufm Desktop, …
15. April 2011: 9:15
Hallo,
hab eine Frage zu deinem Code:
Was machst Du mit deinem Objekt/Event e ? Welche Bedeutung hat es ?
Du übergibst es mit this vom Input Button, später übergibst Du es aber nicht im Funktionsaufruf
window.document.onmousemove = showMousePos;
Bekomme beim Testen der Funktion unterschiedliche Ergebnisse für unterschiedliche Browser,
je nachdem ob ich e fülle oder nicht, aber es wird nicht einheitlich :-(
Grüße,
Wolfgang
15. April 2011: 9:39
e ist das Eventobjekt. Dieses wird automatisch beim Event übergeben. Nur ein Browser macht da eine Ausnahme. Der IE hält das Objekt in der globalen Variabel window.event vor.
window.document.onmousemove = showMousePos; ist kein Funktionsaufruf. Damit wird der Eventhandler zugewiesen. D.h. erst beim auftreten des Events (hier mousemove) wird die Funktion aufgerufen und dann automatisch das Eventobjekt der Funktion als Parameter übergeben.
15. April 2011: 9:41
Ach so, und eine Sache die in meinem Code verwirrend ist. Das beim Aufruf start(this) ist kein Eventobjekt, dass e soll für element stehen, das ist leider etwas verwirrend.
6. Januar 2012: 14:34
Hallo! Wie kriege ich es hin, dass ich jetzt diesen Code mit in meine Homepage einbaue und dann z.B. wenn ich mit der Maus über ein Bild oder einen -Tag fahre direkt an die Mausposition gehängt ein weiteres Fenster habe? Wie ich dann mit dem ouseover mache, das weiß ich, aber bei den werten für width und height habe ich bisher immer nur pixelangaben gemacht und so war das Fenster an ner festen Stelle auf dem Bildschirm!
6. Januar 2012: 16:38
Ich verstehe nicht was du von mir Wissen möchtest. Das Skript ermittelt lediglich die Mausposition eines Events.
22. Januar 2012: 16:08
hi hab das beispiel nochn bisschen erweitert und verändert jetzt zeit es auch die relative position zu objekten an wenn erwünscht
die eigentliche funktion:
mouse_pos = function(e, if_layer) {
if(!e) e = window.event;
var body = (window.document.compatMode && window.document.compatMode == "CSS1Compat") ?
window.document.documentElement : window.document.body;
pos={};
if(!if_layer){
try{
pos.Y = e.pageY;
pos.X = e.pageX;
}catch(e){
pos.Y = e.clientY + body.scrollTop - body.clientTop;
pos.X = e.clientX + body.scrollTop - body.clientTop;
}
}else if(if_layer){
try{
pos.Y = e.layerY;
pos.X = e.layerX;
}catch(e){
pos.Y = e.offsetY;
pos.X = e.offsetX;
}
}
return pos;
}
aufruf:
pos = function(e){
coords = mouse_pos(e, true);
alert(coords.X+" : "+coords.Y);
}
document.getElementById("obj").onclick = pos;
Hoffe es hilft weiter
9. Oktober 2012: 11:45
Und auf welche Art und Weise kann man die Position über einem DIV (statt über der gesamten Seite) ermitteln?