<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css">
  <style>
p span {
  display: inline-block;
  width: 1.8em;
  text-align: right;
}
#buehne {
    border: thin dotted;
    height: 80vh;
    padding: 1em;
    cursor: crosshair;
}

  </style>
  <script>


'use strict';  

(function () {
  function init() {
    document.getElementById('buehne').addEventListener('mousemove', Koordinaten);
  }

  function FindePosition(oElement){
    if(typeof( oElement.offsetParent ) != "undefined"){
      for(var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent){
        posX += oElement.offsetLeft;
        posY += oElement.offsetTop;
      }
       return [ posX, posY ];
    }
    else {
      return [ oElement.x, oElement.y ];
    }
  }

function Koordinaten(e) {
  var PosX = 0,
      PosY = 0,
      buehnenflaeche = document.getElementById('buehne'),
      ImgPos = FindePosition(buehnenflaeche);
  if (!e) var e = window.event;
  if (e.pageX || e.pageY) {
    PosX = e.pageX;
    PosY = e.pageY;
  }
  else if (e.clientX || e.clientY) {
      PosX = e.clientX + document.body.scrollLeft
        + document.documentElement.scrollLeft;
      PosY = e.clientY + document.body.scrollTop
        + document.documentElement.scrollTop;
  }
  PosX = PosX - ImgPos[0];
  PosY = PosY - ImgPos[1];
  document.getElementById('x').innerText = PosX;
  document.getElementById('y').innerText = PosY;
}  

  document.addEventListener('DOMContentLoaded',init);
}());


  </script>
  <title>Element.offsetLeft</title>
</head>
<body id="beispiel">
  <h1>Element.offsetLeft<br><span>offsetParent</span></h1>
 
  <main id="buehne">
    <h2>Mausposition mit offsetParent, OffsetLeft feststellen</h2>
    <p id="beispiel">Dieses div-Element hat einen mousemove-EventHandler, der die Position der Maus innerhalb des Divs anzeigt.</p>
    <p>X: <span id="x"></span>px  &nbsp; Y: <span id="y"></span>px</p>
  </main>

</body>
</html>