Seite 1 von 1
Mausposition mit JS auslesen
Verfasst: 01.05.2007, 19:44
von AGB
Hallo,
ich habe eine kleine Online Anwendung, bei der es schön wäre, wenn die Mausposition per JS angezeigt werden könnte. Jetzt habe ich im Forum von selfhtml gesucht und verschiedene Funktionen gefunden, aber ich hätte gerne eine Lösung, bei der auch gescrollte Positionen berücksichtigt werden.
Es geht im weitesten Sinne um ein Malwerkzeug, bei dem die Speicherung der Mausposition wichtig wäre.
Vielleicht kennt auch jemand einfach ein gutes Forum zum Thema JS.
Verfasst: 01.05.2007, 20:17
von semtex
Das kurze Script kannste Dir wie gewünscht anpassen !
Code: Alles auswählen
<script language="JavaScript">
if(document.layers) {
window.captureEvents(Event.MOUSEMOVE);
window.onmousemove = koordinaten;
}
else {
document.onmousemove = koordinaten;
}
function koordinaten(e) {
xpos = (document.layers || (document.getElementById && !document.all)) ? e.pageX : document.body.scrollLeft +
event.clientX;
ypos = (document.layers || (document.getElementById && !document.all)) ? e.pageY : document.body.scrollTop +
event.clientY;
werte();
}
function werte(){
txt = "Xpos ="+xpos+"; Ypos ="+ypos+" ";
document.forms[0].elements[0].value = txt;
window.status = txt;
}
//-->
</script>
Beispiel Ausgabe #Xpos und #Ypos :
Code: Alles auswählen
<body bgcolor="#ffffff">
<form action="">
<input type="text" name="koord" value="Xpos =0; Ypos =0" size="25" readonly>
</form>
Verfasst: 01.05.2007, 20:41
von AGB
danke. das ist schon mal kompakter, als wasich bisher gefunden hatte. allerdings ist der wert immer die position im fenster. kann ich irgendwie den scrollfaktor auslesen und so auf die eigentlich position im dokument schliessen?
Verfasst: 01.05.2007, 21:06
von d0nut
Meine Version
Code: Alles auswählen
function koordinaten(e) {
var isStrictMode = document.compatMode && document.compatMode != 'BackCompat' ? true : false;
var xpos = isStrictMode ? document.documentElement.scrollLeft : document.body.scrollLeft;
var ypos = isStrictMode ? document.documentElement.scrollTop : document.body.scrollTop;
evt = (e) ? e : ((window.event) ? window.event : "");
xpos += e.clientX;
ypos += e.clientY;
txt = "Xpos ="+xpos+"; Ypos ="+ypos+" ";
document.forms[0].elements[0].value = txt;
window.status = txt;
}
Verfasst: 02.05.2007, 19:43
von AGB
danke, aber auch die scheint ja das scrolling nicht zu berücksichtigen. geht das überhaupt nicht?
Verfasst: 02.05.2007, 21:22
von d0nut
sowohl das Script von semtex als auch meins berücksichtigen das Scrollen.
Aber an den Abweichungen im Code siehst du, dass sich da manche Browser streiten.
Welchen hast du denn? Mit Firefox und IE sollte meiner eigentlich funktionieren.
Verfasst: 03.05.2007, 18:41
von AGB
Also ich habe beide Funktionen ausprobiert (Firefox 2.0.0.3). Wenn ich die Maus nicht bewege, aber gescrollt wird (per Pfeiltaste), müßten sich ja die Werte ändern, da die Mausposition auf der Seite sich ja ändert - tun sie aber nicht. Deshalb bin ich davon ausgegangen, dass nur die Position im Fenster berücksichtigt wird.
Verfasst: 20.09.2010, 16:04
von Max Matti
also ich hab letztens nen etwas längeren code als Mausverfolger gefunden:
Code: Alles auswählen
var isOpera = (window.opera)?true:false;
var isIE = (document.all && !isOpera)?true:false;
var isNS = (!isIE && !isOpera)?true:false;
var mausP;
var divB;
var AnzBilder=0;
var px = "";
var py = "";
var ab = "";
var form;
var XDat = new Array();
var YDat = new Array();
var Faktor = 15;
var Tempo = 12;
var aktiv;
function init() {
Bilderzaehlen(AnzBilder);
mausP = document.getElementById("mvb0");
MouseMotion();
aktiv = setInterval("GetPosPics()",Tempo);
}
function Bilderzaehlen(a) {
var istDa = "mvb"+ a ;
while (document.getElementById(istDa)) {
a++;
istDa = "mvb"+ a ;
}
AnzBilder = a;
}
function MouseMotion() {
if(isIE) document.onmousemove = MouseMotionHandlerIE;
else if(isOpera) {
if (navigator.userAgent.indexOf("Opera 5")!= -1) {
document.onmousemove = MouseMotionHandlerOpera5;
}
else {
document.onmousemove = MouseMotionHandlerOpera;
}
}
else {navigator.userAgent
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = MouseMotionHandlerNS;
}
}
function MouseMotionHandlerNS(event) {
MausPos(event.pageX, event.pageY);
}
function MouseMotionHandlerIE() {
MausPos(Number(window.event.x)+Number(document.body.scrollLeft), Number(window.event.y) + Number(document.body.scrollTop));
}
function MouseMotionHandlerOpera() {
MausPos(Number(window.event.x)+Number(document.body.scrollLeft), Number(window.event.y) + Number(document.body.scrollTop));
}
function MouseMotionHandlerOpera5 () {
MausPos(Number(window.event.x), Number(window.event.y));
}
function MausPos(mausXpos,mausYpos) {
mausP.style.left = mausXpos+2;
mausP.style.top = mausYpos+5;
}
function GetPosPics() {
for (i=0; i<AnzBilder; i++) {
divB = eval(document.getElementById("mvb"+i));
if (!divB.style.left) divB.style.left = 0;
XDat[i] = divB.style.left;
if (!divB.style.top) divB.style.top = 0;
YDat[i] = divB.style.top;
}
for (i=1; i<AnzBilder; i++) {
divB = eval(document.getElementById("mvb"+i));
var a = XDat[i];
if (isNaN(a)) {
a = a.replace(/pt/,"");
a = a.replace(/px/,"");
}
var b = XDat[i-1];
if (isNaN(b)) {
b = b.replace(/pt/,"");
b = b.replace(/px/,"");
}
a = a*1;
b = b*1;
a = a + ((b-a)*(Faktor/30));
b = a % 1;
b = a - b;
divB.style.left = b;
var c = YDat[i];
if (isNaN(c)) {
c = c.replace(/pt/,"");
c = c.replace(/px/,"");
}
var d = YDat[i-1];
if (isNaN(d)) {
d = d.replace(/pt/,"");
d = d.replace(/px/,"");
}
c = c*1;
d = d*1;
c = c + ((d-c)*(Faktor/30));
d = c % 1;
d = c - d;
divB.style.top = d;
}
}
(in eine externe datei mit dem titel script.js)
und
Code: Alles auswählen
<html>
<head>
<title></title>
<script type="text/javascript" src="script.js"></script>
</head>
<body onLoad="init()">
<div id="mvb0" style="visibility: hidden; width: 12px; position: absolute; height: 12px"></div>
<div id="mvb6" style="position: absolute"><img src="27315.jpg" width="25"></div>
<div id="mvb5" style="position: absolute"><img src="27315.jpg" width="25"></div>
<div id="mvb4" style="position: absolute"><img src="27315.jpg" width="25"></div>
<div id="mvb3" style="position: absolute"><img src="27315.jpg" width="25"></div>
<div id="mvb2" style="position: absolute"><img src="27315.jpg" width="25"></div>
<div id="mvb1" style="position: absolute"><img src="27315.jpg" width="25"></div>
</body>
</html>
als html-datei, die aufgerufen wird.
