জাভাস্ক্রিপ্টে মাউস পজিশন প্রতি নির্দিষ্ট ইন্টারভ্যালে ক্যাপচার করা

প্রতি নির্দিষ্ট ইন্টারভ্যালে মাউস পজিশন ক্যাপচার করার কোড।

উদাহরণ

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>Document</title> 
  <style> 
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
    .result { font-size: 18px; font-weight: 500; color: blueviolet; }
  </style> 
</head> 
<body> 
  <h1>Capture mouse position after every given interval</h1> 
  <div class="result"></div> 
  <button class="Btn">CLICK HERE</button> 
  <h3>Click on the above button to start capturing mouse position every 3 seconds</h3> 
  <script> 
    let resultEle = document.querySelector(".result");
    let check;
    let xCoord, yCoord;
    
    document.body.addEventListener("mousemove", function (event) {
      xCoord = event.clientX;
      yCoord = event.clientY;
    });
    
    function displayCoordinate() {
      resultEle.innerHTML = "X coordinate = " + xCoord + "<br> Y coordinate = " + yCoord;
    }
    
    document.querySelector(".Btn").addEventListener("click", () => {
      check = setInterval(displayCoordinate, 3000);
    });
  </script> 
</body> </html>

আউটপুট

বাটন ক্লিক করার পর প্রতি ৩ সেকেন্ডে করেন্ট মাউস কোঅর্ডিনেট আপডেট হবে।

উন্নত সংস্করণ (Start/Stop সহ)

<button id="startBtn">Start Tracking</button>
<button id="stopBtn" disabled>Stop Tracking</button>
<div id="coords"></div>

<script>
  let intervalId;
  let x = 0, y = 0;
  
  document.addEventListener('mousemove', e => { x = e.clientX; y = e.clientY; });
  
  document.getElementById('startBtn').onclick = () => {
    intervalId = setInterval(() => {
      document.getElementById('coords').textContent = `X: ${x}, Y: ${y}`;
    }, 3000);
    document.getElementById('startBtn').disabled = true;
    document.getElementById('stopBtn').disabled = false;
  };
  
  document.getElementById('stopBtn').onclick = () => {
    clearInterval(intervalId);
    document.getElementById('startBtn').disabled = false;
    document.getElementById('stopBtn').disabled = true;
  };
</script>

ব্যাখ্যা

• mousemove ইভেন্টে মাউস কোঅর্ডিনেট আপডেট হয়
• setInterval দিয়ে প্রতি ৩ সেকেন্ডে ডিসপ্লে আপডেট
• clearInterval দিয়ে বন্ধ করা যায়
• event.clientX/Y ভিউপোর্ট রিলেটিভ, pageX/Y ডকুমেন্ট রিলেটিভ