✔ Mausposition über <div>-Element

[Geflügel]

Hallo,

Ich habe ein <div>-Element welches Kind gaaaaanz vieler anderer <div>-Elemente ist.

Nun möchte ich folgendes ermitteln: Die Position(X/Y) des <div>s in bezug auf den Screen.

Meine Idee: Da offsetLeft/offsetRight sich ja am Elternelement orientiert, muss man sich durch durch den ganzen Baum nach oben "durchhangeln" und die offsets addieren.

Frage: Stimmt das so? Wenn ja, ginge das auch eifacher?

Noch eine Frage: Kann man direkt (ohne große Umwege) die Mausposition in bezug auf die obere linke Ecke des unter der Maus liegenden Layers ermitteln?

Danke im Voraus!

 

[Quaese]

Hi,

um das Offset eines Elementes im "screen" zu ermitteln, hatten wir hier kürzlich einen Beitrag.

Zu deiner zweiten Frage - du wirst wohl auch hier zunächst die kompletten Offsets des Elements ermitteln
müssen. Diese Grösse kann dann von der aktuellen Koordinate des Mauszeigers subtrahiert werden.

Beispiel für das Top-Offset:

function myTopOffset(objElem){
  // Top-Offset des Ausgangselementes
  var intOffsetTop = objElem.offsetTop;
  // Nächstes Element mit Top-Offset ermitteln
  objElem = objElem.offsetParent;
  // Solange Elemente mit relevantem Top-Offset existieren
  while(objElem){
    intOffsetTop += objElem.offsetTop;
    objElem = objElem.offsetParent;
  }

  return intOffsetTop;
}

function MouseOffset(objEvent, objThis){
  var objBody = null;
  // Passendes Body-Objekt ermitteln
  if(document.all && !window.opera)
    objBody = (window.document.compatMode == "CSS1Compat")? window.document.documentElement : window.document.body || null;
  else
    objBody = document.documentElement;

  // Aktuelle Mauskoordinaten bei Mausklick ermitteln
  var intMouseY = document.all ? (window.event.clientY+objBody.scrollTop) : objEvent.pageY;

  // Offset des Mauszeigers im auslösenden Element
  var intOffsetY = intMouseY - myTopOffset(objThis);

  objThis.innerHTML = "Maus-Position (im Dokument): " + intMouseY + "<br>Maus-Position (im Element): " + intOffsetY;

  return false;
}

Aufgerufen wird das Ganze zum Beispiel im onclick-Event eines Elements.

<div onclick="MouseOffset(event, this);">Offset-Element</div>

Vielleicht hilft dir das weiter.

Ciao
Quaese

 

[Geflügel]

UI, werde mir das am WE durch den Kopf gehen lassen. Vielen Dank!