HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>releaseCapture coords</title>
  <style>body{font-family:system-ui,sans-serif;margin:1rem;}#myButton{border:solid black 1px;color:black;padding:6px 10px;box-shadow:black 2px 2px;display:inline-block;text-decoration:none;user-select:none;}</style>
</head>
<body>
  <p>Click and hold, then move the mouse (Gecko-style capture).</p>
  <a id="myButton" href="#">Test Me</a>
  <div id="output">No events yet</div>
  <script>
    function mouseMoved(e) {
      document.getElementById("output").textContent =
        "Position: " + e.clientX + ", " + e.clientY;
    }
    function mouseDown(e) {
      e.preventDefault();
      if (typeof e.target.setCapture === "function") {
        e.target.setCapture();
      }
      e.target.addEventListener("mousemove", mouseMoved);
    }
    function mouseUp(e) {
      if (typeof document.releaseCapture === "function") {
        document.releaseCapture();
      }
      e.target.removeEventListener("mousemove", mouseMoved);
    }
    var btn = document.getElementById("myButton");
    if (typeof btn.setCapture === "function") {
      btn.addEventListener("mousedown", mouseDown);
      btn.addEventListener("mouseup", mouseUp);
    } else {
      document.getElementById("output").textContent =
        "Sorry, there appears to be no setCapture support on this browser";
    }
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Document.releaseCapture — MDN coordinates (Try It)