[Javascript] Hilfe bei Ermittlung der Mouse-Position

[Tarcon]

Hallo JS´ler...

Ich verzweifle gerade an einem Script, von dem ich sicher bin, dass es eigentlich korrekt funktionieren müsste. Irgendwo steckt aber noch immer ein Fehler, den ich einfach nicht finden kann. Sieht jemand von Euch, was ich falsch mache?

Zunächst schildere ich Euch, was das Script tut bzw. tun soll.

Es gibt ein Div im Body-Tag:

<div class="mouseInfoLayer" id="mouseInfoLayer"></div>

Dazu gehört folgender Style:

.mouseInfoLayer {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: normal;
	color: #000000;
	background-color: #ffffe1;
	text-align: left;
	width: auto;
	border: 1px solid #000000;
	position: absolute;
	z-index: 250;
	height: auto;
	padding-top: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	padding-left: 5px;
	visibility: hidden;
}

Das Script soll nun den Layer, wie ein Browsertooltip, an der Mausposition platzieren. Das passiert auch sowohl im IE6/7 als auch im aktuellen Firefox. Das eigentliche Problem ist die Platzierung, wenn der Anzeigebereich größer ist, als das Browserfenster, also z. B. nach unten gescrollt werden muss.

Die Position wird für den IE hier mit clientX ausgelesen. Ich bin mir im Klaren darüber, dass pageX sinnvoller wäre, wenn es denn funktionieren würde. Beim Firefox funktioniert es mit pageX nämlich wunderbar und die Probleme treten ausschließlich mit dem IE auf, in meinem Fall mit der 7er Version.

Nun dache ich, ich lese clientX und clientY aus und addiere einfach document.body.scrollLeft bzw. scrollTop. Leider bleiben diese beiden Werte vollständig leer bzw. undefined, egal wie ich es versuche.

Kann mir jemand helfen? Ich sitze seit 1,5 Tagen da und weiß nicht mehr, wie ich weitermachen soll.

function init() {
    if (window.event) {
        if (document.captureEvents){
          document.captureEvents(Event.MOUSEMOVE);
        } else {
          window.captureEvents(Event.MOUSEMOVE);
        }
    }
  document.onmousemove = getXY;
}

init();

function getXY(e) {
  mousex = (window.Event) ? e.pageX : event.clientX; //IE-Alternative zu pageX bzw. clientx offSetX/scrollTop/Left
  mousey = (window.Event) ? e.pageY : event.clientY;
}

function init() {
    if (window.event) {
        if (document.captureEvents){
          document.captureEvents(Event.MOUSEMOVE);
        } else {
          window.captureEvents(Event.MOUSEMOVE);
        }
    }
  document.onmousemove = getXY;
}

function createInfo(layerContent) {
	document.getElementById('mouseInfoLayer').innerHTML=layerContent;
	document.getElementById('mouseInfoLayer').style.left = mousex+15+'px';
	document.getElementById('mouseInfoLayer').style.top = mousey+'px';
	document.getElementById('mouseInfoLayer').style.visibility = 'visible';
}

function closeInfo() {
	document.getElementById('mouseInfoLayer').innerHTML='';
	document.getElementById('mouseInfoLayer').style.visibility = 'hidden';
}

Viele Grüße
Tarcon

[ein schlauer]

Deine Überprüfung auf Netscape 4 ist fehlerhaft, da aber das ganze Skript eh nicht mit dem Browser funktioniert kannst du das auch rauschmeissen.

Im IE musst du noch ermitteln, ob die Seite im Quirks oder standardmode ist.

var mousex
var mousey;
function getXY(e) {
    if(!e) e = window.event;
    var body = (window.document.compatMode && window.document.compatMode == "CSS1Compat") ?
    window.document.documentElement : window.document.body || null;
    
    mousey = e.pageY ? e.pageY : e.clientY + body.scrollTop;
    mousex = e.pageX ? e.pageX : e.clientX + body.scrollLeft;
} 

[Tarcon]

Hallo "ein schlauer"!

Du hast mir wirklich den Tag gerettet, denn es funktioniert einwandfrei. Was Quirks- und Standardmode sind, weiß ich zwar noch nicht, da ich diese Begriffe in Deinem Beitrag das erste Mal gelesen habe, werde mich aber diesbezüglich schlau googlen!

Vielen Dank für die schnelle Hilfe!!

Gruß
Tarcon

[ein schlauer]

Was Quirks- und Standardmode sind, weiß ich zwar noch nicht, da ich diese Begriffe in Deinem Beitrag das erste Mal gelesen habe, werde mich aber diesbezüglich schlau googlen!

Bitte, gern geschehen.

Genau deshalb hatte ich die Begriffe erwähnt
Da du keine Ausnahme bist, doch diese Begriffe sind durchaus wichtig, nicht nur für JS, sondern auch für CSS.

[Rincon]

Zunäächst Entschuldigung für das Ausgraben dieses alten Themas.

Ich habe die hier gepostete Funktion getXY(e) bisher erfolgreich verwendet. Allerdings funktioniert sie mit dem IE8 leider nicht mehr.

Kann mir jemand bzgl. der nötigen Anpassung weiterhelfen?

Danke schonmal!

//edit:
Meine eher schwach ausgeprägten Debugging-Künste haben ergeben, dass nach "if(!e) e = window.event;" jeder Zugriff auf "e" in "mitglied nicht gefunden" resultiert.

[mikdoe]

Ich hab hier eine aktuelle Routine zur Abfrage der Tasten gefunden. Vielleicht kannst du das für die Mausposition irgendwie adaptieren.

var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
else return;
if (keycode == 13) absenden();

[kkapsner]

@Rincon: das kann ich mir gerade nicht erklären - kannst du bitte einen Testlink machen.

[Rincon]

Jap mach ich
Kommt per PM, ok?

[kkapsner]

OK - das Problem liegt daran, dass du die Funktion nicht direkt im Event, sondern über einen Timeout aufrufst - da ist das event-Objekt dann nicht mehr gültig und ist zu Recht nicht mehr mit Werten bevölkert (ist im IE ja immer ein globales Element).

Lösen kannst du das, indem du entweder dein komplettes Design umstellst und nicht im großen div auf onclick, sondern in den einzelnen Parzellen auf onclick reagierst - da hast du dann direkt das ausgewählte Objekt - oder eine lokale Kopie des Event-Objektes erstellst und diese im Timeout weiterverwendest:

 var localEvt = {};
for (var i in evt){
	localEvt[i] = evt[i];
}

[Rincon]

Super, danke!

Die Entschedung ist da schnell gefallen. Auf die Parzellen kann ich nicht reagieren, da noch ein halbtransparentes Bild (Spielfeldbegrenzung, etc.) darüber liegt.

Dann werde ich wohl mal die andere Variante ausprobieren. Danke

[Rincon]

Prima, läuft wieder.
Wenn ich dich richtig verstanden habe, dann war das jetzt kein Problem des IE8, sondern kam durch die Änderung mit dem Timeout für "alle" IEs zustande?

Ein Problem hab ich jetzt noch: In FF, Chrome und Opera passen die Koordinaten genau zu der Parzelle, über der die Maus auch wirklich gerade ist. Beim IE (7 und 8 gerade getestet) wird allerdings eine (oder 1,5) Parzellen weiter links gewählt... das sind vielleicht 30Pixel oder so die ich in X-Richtung anpassen müsste. Y stimmt. Wie mache ich das am besten "nur für den IE"?

Grüße

//edit:
got it!
--> mousex = e.pageX ? e.pageX : e.clientX + body.scrollLeft +20;

[kkapsner]

Ok - das Problem ist nicht das auslesen deiner Mausposition - die stimmt ohne die + 20. Das Problem ist, dass die Funktion findPos im IE einen Bug trifft. Was jetzt genau das Problem ist, konnte ich nicht herausfinden, ABER du kannst das Ganze lösen, indem du den Klassen .Sheet-body, .contentLayout und .content_ KEINE position: relative; gibst (ist auch gar nicht nötig).

[ein schlauer]

Ich muss leider raten, da wir den Code nicht kennen, aber offsetTop/Left sind relative Werte. Vermutlich liegt es daran

[kkapsner]

@ein schlauer: da ist irgendetwas im IE falsch: offsetLeft bezieht sich plötzlich nicht mehr auf den nächsten offsetParent, sondern auf den überübernächsten... sehr seltsam. Da die beiden "zwischen"Parents aber keine Positinierung ausführen, kann man auf position: relative; verzichten.