JavaScript उदाहरण - दिए गए अंतराल पर माउस पोजीशन कैप्चर करना

दिए गए अंतराल पर माउस पोजीशन कैप्चर करने का कोड नीचे दिया गया है।

उदाहरण

<!DOCTYPE html> 
<html lang="en"> 
<head> 
  <meta charset="UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>माउस पोजीशन कैप्चर</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>हर दिए गए अंतराल पर माउस पोजीशन कैप्चर करें</h1> 
  <div class="result"></div> 
  <button class="Btn">यहां क्लिक करें</button> 
  <h3>ऊपर दिए गए बटन पर क्लिक करके हर 3 सेकंड में माउस पोजीशन कैप्चर करना शुरू करें</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(element) { 
      resultEle.innerHTML = "X निर्देशांक = " + xCoord + "<br> Y निर्देशांक = " + yCoord; 
    } 
    document.querySelector(".Btn").addEventListener("click", () => { 
      setInterval(displayCoordinate, 3000); 
    }); 
  </script> 
</body> 
</html>

आउटपुट

"यहां क्लिक करें" बटन पर क्लिक करने पर माउस पोजीशन हर 3 सेकंड में कैप्चर होगी:

कैसे काम करता है:

1. mousemove इवेंट - हर माउस मूवमेंट पर xCoord, yCoord अपडेट करता है
2. setInterval - हर 3000ms (3 सेकंड) में displayCoordinate कॉल करता है
3. clientX/clientY - व्यूपोर्ट के सापेक्ष माउस पोजीशन

सुधार के सुझाव:

• रोकने का बटन - clearInterval के लिए स्टॉप बटन जोड़ें
• pageX/pageY - डॉक्यूमेंट के सापेक्ष पोजीशन (स्क्रॉल सहित)
• थ्रॉटलिंग - mousemove पर थ्रॉटल लगाकर प्रदर्शन सुधारें
• रिलेटिव पोजीशन - किसी एलिमेंट के सापेक्ष पोजीशन के लिए getBoundingClientRect() उपयोग करें

बेहतर कार्यान्वयन:

let intervalId = null;
let coords = { x: 0, y: 0 };

document.addEventListener('mousemove', (e) => {
  coords.x = e.clientX;
  coords.y = e.clientY;
});

function startTracking() {
  if (intervalId) return; // पहले से चल रहा है
  intervalId = setInterval(() => {
    resultEle.innerHTML = `X: ${coords.x}, Y: ${coords.y}`;
  }, 3000);
}

function stopTracking() {
  clearInterval(intervalId);
  intervalId = null;
}

// एलिमेंट के सापेक्ष पोजीशन
function getRelativePos(element, event) {
  const rect = element.getBoundingClientRect();
  return {
    x: event.clientX - rect.left,
    y: event.clientY - rect.top
  };
}

उपयोग के मामले:

• हीटमैप/एनालिटिक्स - यूजर माउस मूवमेंट ट्रैकिंग
• गेम्स - माउस-आधारित कंट्रोल्स
• टूलटिप्स/होवर इफेक्ट्स - डायनामिक पोजिशनिंग
• एक्सेसिबिलिटी - माउस ट्रेल्स, मैग्निफायर