Javascript ist Toll!

10. February 2006 - 08:22

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

Das Beispiel zeigt die aktuelle Mausposition.

top / left: Koordinaten im Dokument

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. May 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)
3890 mal gelesen.

14 Kommentare

Leave a comment »

Seiten:

1. Comment von: johannes
23. March 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.

2. Comment von: Stefan
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 ;-)

3. Comment von: Helferlein
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.

4. Comment von: tafy
12. March 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,

};

5. Comment von: Struppi
12. March 2009: 13:12

Nur im IE, aber du hast natürlich vom Prinzip her recht. Ich hab’s geändert, Danke.

6. Comment von: Stefan L.
12. October 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

7. Comment von: Tim Ruls
28. July 2010: 13:05

Auch danke von mir.
@Johannes: Ein paar Anwendungsbeispiele: Drag’n’Drop, Fenster zeiehen, wie bei Windows aufm Desktop, …

8. Comment von: Wolfgang
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

9. Comment von: Struppi
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.

10. Comment von: Struppi
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.

11. Comment von: Poldi95
6. January 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!

12. Comment von: Struppi
6. January 2012: 16:38

Ich verstehe nicht was du von mir Wissen möchtest. Das Skript ermittelt lediglich die Mausposition eines Events.

13. Comment von: Gawin
22. January 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

14. Comment von: AnotherKentPaul
9. October 2012: 11:45

Und auf welche Art und Weise kann man die Position über einem DIV (statt über der gesamten Seite) ermitteln?

Leave a comment

Name (required)
Mail (wird nicht angezeigt) (required)
Website

Folgende HTML Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot kostenloser Counter Browser-Statistiken
rats-wonderful
rats-wonderful
rats-wonderful
rats-wonderful