HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>setCapture coordinates</title>
  <style>
    body{font-family:sans-serif;margin:1rem;}
    #myButton{border:solid black 1px;padding:8px 12px;display:inline-block;cursor:pointer;box-shadow:black 2px 2px;}
    #output{margin-top:1rem;padding:0.75rem;background:#f8fafc;border:1px solid #cbd5e1;border-radius:6px;}
  </style>
</head>
<body>
  <p>Click and hold the button, then move the mouse.</p>
  <a id="myButton" href="#">Test Me</a>
  <div id="output">No events yet</div>
  <script>
    function mouseDown(e) {
      e.preventDefault();
      if (!e.target.setCapture) return;
      e.target.setCapture();
      e.target.addEventListener("mousemove", mouseMoved);
    }
    function mouseUp(e) {
      e.target.removeEventListener("mousemove", mouseMoved);
    }
    function mouseMoved(e) {
      document.getElementById("output").textContent = "Position: " + e.clientX + ", " + e.clientY;
    }
    var btn = document.getElementById("myButton");
    if (btn.setCapture) {
      btn.addEventListener("mousedown", mouseDown);
      btn.addEventListener("mouseup", mouseUp);
    } else {
      document.getElementById("output").textContent = "Sorry, no setCapture support in this browser";
    }
  </script>
</body>
</html>

Lines: 0 | Characters: 0

Live Preview Auto-refresh on Run

Element.setCapture — track coordinates (Try It)