HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>pageX — marker</title>
  <style>
    body { margin: 0; min-height: 120vh; }
    #pin {
      position: absolute;
      width: 14px;
      height: 14px;
      margin: -7px 0 0 -7px;
      border-radius: 50%;
      background: #e11d48;
      left: 0;
      top: 0;
      pointer-events: none;
    }
    p { padding: 16px; }
  </style>
</head>
<body>
  <p>Click anywhere on the page to move the pin (document coordinates).</p>
  <div id="pin"></div>
  <script>
    var pin = document.getElementById("pin");
    document.addEventListener("click", function (e) {
      pin.style.left = e.pageX + "px";
      pin.style.top = e.pageY + "px";
    });
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

MouseEvent.pageX — page marker (Try It)