HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>layerX — form</title>
  <style>
    #d1 { border: solid blue 1px; padding: 16px; margin-bottom: 12px; }
    #d2 {
      position: absolute; top: 160px; left: 40%; width: 40%;
      border: solid blue 1px; padding: 16px; background: #fafafa;
    }
    #d3 {
      position: absolute; top: 280px; left: 10%; width: 50%;
      border: solid blue 1px; padding: 10px; background: #fff;
    }
  </style>
</head>
<body>
  <p>Click the boxes to fill the form.</p>
  <div id="d1"><span>Unpositioned</span></div>
  <div id="d2"><span>Positioned</span></div>
  <div id="d3">
    <form name="form_coords" id="form1">
      Parent Element id: <input type="text" name="parentId" size="7" /><br />
      pageX: <input type="text" name="pageXCoords" size="7" />
      pageY: <input type="text" name="pageYCoords" size="7" /><br />
      layerX: <input type="text" name="layerXCoords" size="7" />
      layerY: <input type="text" name="layerYCoords" size="7" />
    </form>
  </div>
  <script>
    function showCoords(evt) {
      var form = document.forms.form_coords;
      form.parentId.value = evt.target.parentNode.id || "(none)";
      form.pageXCoords.value = evt.pageX;
      form.pageYCoords.value = evt.pageY;
      form.layerXCoords.value = evt.layerX;
      form.layerYCoords.value = evt.layerY;
    }
    window.addEventListener("mousedown", showCoords);
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

MouseEvent.layerX — MDN-style form (Try It)