Mausposition mit JS auslesen

Beitrag von **AGB** » 01.05.2007, 19:44

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.

von **Anzeige von ABAKUS** »

Beitrag von **semtex** » 01.05.2007, 20:17

Das kurze Script kannste Dir wie gewünscht anpassen !

Code: Alles auswählen

<script language="JavaScript">

if&#40;document.layers&#41; &#123;
	window.captureEvents&#40;Event.MOUSEMOVE&#41;;
	window.onmousemove = koordinaten;
	&#125;
	else &#123;
		document.onmousemove = koordinaten;
	&#125;
function koordinaten&#40;e&#41; &#123;
	xpos = &#40;document.layers || &#40;document.getElementById && !document.all&#41;&#41; ? e.pageX &#58; document.body.scrollLeft + 

event.clientX;
	ypos = &#40;document.layers || &#40;document.getElementById && !document.all&#41;&#41; ? e.pageY &#58; document.body.scrollTop + 

event.clientY;
	werte&#40;&#41;;
&#125;
function werte&#40;&#41;&#123;
	txt = "Xpos ="+xpos+"; Ypos ="+ypos+"  ";
	document.forms&#91;0&#93;.elements&#91;0&#93;.value = txt;
	window.status = txt;
&#125;
//-->
</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>

Beitrag von **AGB** » 01.05.2007, 20:41

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?

Beitrag von **d0nut** » 01.05.2007, 21:06

Meine Version

Code: Alles auswählen

function koordinaten&#40;e&#41; &#123;
	var isStrictMode = document.compatMode && document.compatMode != 'BackCompat' ? true &#58; false;
	var xpos = isStrictMode ? document.documentElement.scrollLeft &#58; document.body.scrollLeft;
	var ypos = isStrictMode ? document.documentElement.scrollTop &#58; document.body.scrollTop;
	evt = &#40;e&#41; ? e &#58; &#40;&#40;window.event&#41; ? window.event &#58; ""&#41;;
	xpos += e.clientX;
	ypos += e.clientY;
	txt = "Xpos ="+xpos+"; Ypos ="+ypos+"  ";
	document.forms&#91;0&#93;.elements&#91;0&#93;.value = txt;
	window.status = txt;
&#125;

Beitrag von **AGB** » 02.05.2007, 19:43

danke, aber auch die scheint ja das scrolling nicht zu berücksichtigen. geht das überhaupt nicht?

Beitrag von **d0nut** » 02.05.2007, 21:22

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.

Beitrag von **AGB** » 03.05.2007, 18:41

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.

Beitrag von **Max Matti** » 20.09.2010, 16:04

also ich hab letztens nen etwas längeren code als Mausverfolger gefunden:

Code: Alles auswählen

var isOpera = &#40;window.opera&#41;?true&#58;false;
var isIE    = &#40;document.all && !isOpera&#41;?true&#58;false;
var isNS    = &#40;!isIE && !isOpera&#41;?true&#58;false;
var mausP;
var divB;
var AnzBilder=0;
var px  = "";
var py  = "";
var ab  = "";
var form;
var XDat = new Array&#40;&#41;;
var YDat = new Array&#40;&#41;;
var Faktor = 15;
var Tempo = 12;
var aktiv;

function init&#40;&#41; &#123;
  Bilderzaehlen&#40;AnzBilder&#41;;
  mausP = document.getElementById&#40;"mvb0"&#41;;
  MouseMotion&#40;&#41;;
  aktiv = setInterval&#40;"GetPosPics&#40;&#41;",Tempo&#41;;
&#125;

function Bilderzaehlen&#40;a&#41; &#123;
  var istDa = "mvb"+ a ;
  while &#40;document.getElementById&#40;istDa&#41;&#41; &#123;
    a++;
    istDa = "mvb"+ a ;
  &#125;
  AnzBilder = a;
&#125;

function MouseMotion&#40;&#41; &#123;
  if&#40;isIE&#41; document.onmousemove = MouseMotionHandlerIE;
  else if&#40;isOpera&#41; &#123;
    if &#40;navigator.userAgent.indexOf&#40;"Opera 5"&#41;!= -1&#41; &#123;
      document.onmousemove = MouseMotionHandlerOpera5;
    &#125;
    else &#123;
      document.onmousemove = MouseMotionHandlerOpera;
    &#125;
  &#125;
  else &#123;navigator.userAgent
    document.captureEvents&#40;Event.MOUSEMOVE&#41;;
    document.onmousemove = MouseMotionHandlerNS;
  &#125;
&#125;

function MouseMotionHandlerNS&#40;event&#41; &#123;
  MausPos&#40;event.pageX, event.pageY&#41;;
&#125;

function MouseMotionHandlerIE&#40;&#41; &#123;
  MausPos&#40;Number&#40;window.event.x&#41;+Number&#40;document.body.scrollLeft&#41;, Number&#40;window.event.y&#41; + Number&#40;document.body.scrollTop&#41;&#41;;
&#125;

function MouseMotionHandlerOpera&#40;&#41; &#123;
  MausPos&#40;Number&#40;window.event.x&#41;+Number&#40;document.body.scrollLeft&#41;, Number&#40;window.event.y&#41; + Number&#40;document.body.scrollTop&#41;&#41;;
&#125;

function MouseMotionHandlerOpera5 &#40;&#41; &#123;
  MausPos&#40;Number&#40;window.event.x&#41;, Number&#40;window.event.y&#41;&#41;;

&#125;

function MausPos&#40;mausXpos,mausYpos&#41; &#123;
  mausP.style.left = mausXpos+2;
  mausP.style.top = mausYpos+5;
&#125;

function GetPosPics&#40;&#41; &#123;
  for &#40;i=0; i<AnzBilder; i++&#41; &#123;
    divB = eval&#40;document.getElementById&#40;"mvb"+i&#41;&#41;;
    if &#40;!divB.style.left&#41; divB.style.left = 0;
    XDat&#91;i&#93; = divB.style.left;
    if &#40;!divB.style.top&#41; divB.style.top = 0;
    YDat&#91;i&#93; = divB.style.top;
  &#125;
  for &#40;i=1; i<AnzBilder; i++&#41; &#123;
    divB = eval&#40;document.getElementById&#40;"mvb"+i&#41;&#41;;
    var a = XDat&#91;i&#93;;
    if &#40;isNaN&#40;a&#41;&#41; &#123;
      a = a.replace&#40;/pt/,""&#41;;
      a = a.replace&#40;/px/,""&#41;;
    &#125;
    var b = XDat&#91;i-1&#93;;
    if &#40;isNaN&#40;b&#41;&#41; &#123;
      b = b.replace&#40;/pt/,""&#41;;
      b = b.replace&#40;/px/,""&#41;;
    &#125;
    a = a*1;
    b = b*1;
    a = a + &#40;&#40;b-a&#41;*&#40;Faktor/30&#41;&#41;;
    b = a % 1;
    b = a - b;
    divB.style.left = b;

    var c = YDat&#91;i&#93;;
    if &#40;isNaN&#40;c&#41;&#41; &#123;
      c = c.replace&#40;/pt/,""&#41;;
      c = c.replace&#40;/px/,""&#41;;
    &#125;
    var d = YDat&#91;i-1&#93;;
    if &#40;isNaN&#40;d&#41;&#41; &#123;
      d = d.replace&#40;/pt/,""&#41;;
      d = d.replace&#40;/px/,""&#41;;
    &#125;
    c = c*1;
    d = d*1;
    c = c + &#40;&#40;d-c&#41;*&#40;Faktor/30&#41;&#41;;
    d = c % 1;
    d = c - d;
    divB.style.top = d;
  &#125;
&#125;

(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&#40;&#41;">
  <div id="mvb0" style="visibility&#58; hidden; width&#58; 12px; position&#58; absolute; height&#58; 12px"></div>
  <div id="mvb6" style="position&#58; absolute"><img src="27315.jpg" width="25"></div>
  <div id="mvb5" style="position&#58; absolute"><img src="27315.jpg" width="25"></div>
  <div id="mvb4" style="position&#58; absolute"><img src="27315.jpg" width="25"></div>
  <div id="mvb3" style="position&#58; absolute"><img src="27315.jpg" width="25"></div>
  <div id="mvb2" style="position&#58; absolute"><img src="27315.jpg" width="25"></div>
  <div id="mvb1" style="position&#58; absolute"><img src="27315.jpg" width="25"></div>
 </body>
</html>

als html-datei, die aufgerufen wird.