Mausposition relativ zu einem Element

[Fraga]

Ich benötige die Mausposition relativ zu einem Element. Dabei handelt es sich um ein <tr>-Tag. Alle Lösungsansätze, die ich bisher gefunden habe, haben entweder nicht funktioniert oder man musste per CSS die position auf relative setzen, was jedoch dazu führt, dass der Rahmen zwischen den Tabellenzeilen nicht angezeigt wird.

[misterunknown]

Moin,

Ich benötige die Mausposition relativ zu einem Element. Dabei handelt es sich um ein <tr>-Tag. Alle Lösungsansätze, die ich bisher gefunden habe, haben entweder nicht funktioniert oder man musste per CSS die position auf relative setzen, was jedoch dazu führt, dass der Rahmen zwischen den Tabellenzeilen nicht angezeigt wird.

Diese Anleitung kannst du zum Ermitteln von Elementpositionen nutzen, zum Ermitteln der Mausposition sind die <http://de.selfhtml.org/javascript/objekte/event.htm@title=entsprechenden Event-Eigenschaften> hilfreich.

relative Position zum Element = Position des Mauszeigers - Position des Elements

Grüße Marco

[Fraga]

Moin,

Ich benötige die Mausposition relativ zu einem Element. Dabei handelt es sich um ein <tr>-Tag. Alle Lösungsansätze, die ich bisher gefunden habe, haben entweder nicht funktioniert oder man musste per CSS die position auf relative setzen, was jedoch dazu führt, dass der Rahmen zwischen den Tabellenzeilen nicht angezeigt wird.

Diese Anleitung kannst du zum Ermitteln von Elementpositionen nutzen, zum Ermitteln der Mausposition sind die <http://de.selfhtml.org/javascript/objekte/event.htm@title=entsprechenden Event-Eigenschaften> hilfreich.

relative Position zum Element = Position des Mauszeigers - Position des Elements

Grüße Marco

Wenn ich ereignis.clientY-getPosY(element) rechne, wobei getPosY(element) folgendermaßen ausseht:

function getPosY(element){
         var elem = element;
         var tagname = "";
         var y = 0;

while ((typeof(elem)=="object")&&(typeof(elem.tagName)!="undefined")){
              y+=elem.offsetTop;

tagname=elem.tagName.toUpperCase();

if (tagname=="BODY")
                   elem=0;

if (typeof(elem)=="object" && typeof(elem.offsetParent)=="object")
                   elem=elem.offsetParent;
          }
          return y;
}

erhalte ich als Ergebnis immer negative Zahlen. Zu erwähnen wäre vielleicht, dass man auf der Seite nach unten scrollen muss, um das Element zu erreichen.

[misterunknown]

Moin,

Wenn ich ereignis.clientY-getPosY(element) rechne, wobei getPosY(element) folgendermaßen ausseht:
[...]
erhalte ich als Ergebnis immer negative Zahlen. Zu erwähnen wäre vielleicht, dass man auf der Seite nach unten scrollen muss, um das Element zu erreichen.

Das ist ein Fall, den ich nicht bedacht habe, da die Mausposition sich meines Wissens auf den Viewport bezieht, die Elementposition hingegen auf die Seitengröße.

Um das Problem zu umgehen muss man noch den Wert bestimmen, um den die Seite schon gescrollt wurde. Dazu gibt es einen Post auf stackoverflow.com, in dem zwei Funktionen beschrieben werden, eine für den aktuellen Scrollstatus, und einen für die Gesamtgröße der Seite.

Ich habe die Funktion zwar nicht getestet, für mich sieht sie aber brauchbar aus. Wenn du von der Elementposition die Scollweite abziehst (sowohl in x- als auch y-Richtung!), sollte die relative Mausposition korrekt sein.

Grüße Marco

[Matthias Apsel]

Om nah hoo pez nyeetz, misterunknown!

Das ist ein Fall, den ich nicht bedacht habe, da die Mausposition sich meines Wissens auf den Viewport bezieht, die Elementposition hingegen auf die Seitengröße.

getBoundingClientRect() liefert die Angaben in Bezug auf den Viewport.

Matthias

[misterunknown]

Moin,

getBoundingClientRect() liefert die Angaben in Bezug auf den Viewport.

Sowas hab ich gesucht, aber auf die schnelle nicht gefunden...
Naja, wieder was gelernt :) Danke.

Grüße Marco

[Fraga]

Danke, jetzt funktioniert es.

[misterunknown]

Moin,

Danke, jetzt funktioniert es.

Wenn du willst, kannst du die Funktion, die Matthias vorgeschlagen hat nutzen. Das dürfte dir einige Zeilen Code ersparen ;)

Grüße Marco