JavaScript से माउस निर्देशांक प्राप्त करें

JavaScript में माउस निर्देशांक प्राप्त करना इंटरैक्टिव वेब एप्लिकेशन, गेम, और UI प्रभावों के लिए आवश्यक है। mousemove इवेंट रियल-टाइम पोजीशन ट्रैकिंग प्रदान करता है।

उदाहरण

<!DOCTYPE html> <html> <head> <style> 
    body { font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; height: 100vh; margin: 0; } 
    .sample { font-size: 24px; font-weight: 500; padding: 20px; background: #f5f5f5; border-radius: 8px; display: inline-block; margin: 20px; } 
    h3 { margin: 20px; color: #666; } 
</style> </head> <body> 
<h1>माउस निर्देशांक ट्रैकर</h1> 
<p class="sample">माउस घुमाएं...</p> 
<h3>स्क्रीन पर माउस घुमाकर X और Y अक्ष स्थिति प्राप्त करें</h3> 
<script> 
    const sampleEle = document.querySelector(".sample"); 
    document.body.addEventListener("mousemove", (event) => { 
        sampleEle.innerHTML = `X अक्ष: ${event.clientX} | Y अक्ष: ${event.clientY}`; 
    }); 
</script> </body> </html>

आउटपुट

माउस घुमाने पर रियल-टाइम में X और Y निर्देशांक अपडेट होते हैं।

माउस इवेंट प्रॉपर्टीज तुलना

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

• टूलटिप पोजीशनिंग
• ड्रैग एंड ड्रॉप ऑपरेशन
• कैनवास ड्रॉइंग एप्लिकेशन
• कस्टम कर्सर प्रभाव
• हीटमैप ट्रैकिंग