onMouseMove माउस स्थिति प्राप्त करें

Question

जावास्क्रिप्ट में, जावास्क्रिप्ट ईवेंट हैंडर के अंदर onMouseMove के लिए मैं पृष्ठ के शीर्ष के सापेक्ष x, y corrdinates में माउस स्थिति कैसे प्राप्त करूं?

Answer 1

अगर आप jQuery का उपयोग कर सकते, तो this में मदद मिलेगी:

<div id="divA" style="width:100px;height:100px;clear:both;"></div> 
<span></span><span></span> 
<script> 
    $("#divA").mousemove(function(e){ 
     var pageCoords = "(" + e.pageX + ", " + e.pageY + ")"; 
     var clientCoords = "(" + e.clientX + ", " + e.clientY + ")"; 
     $("span:first").text("(e.pageX, e.pageY) - " + pageCoords); 
     $("span:last").text("(e.clientX, e.clientY) - " + clientCoords); 
    }); 

</script> 

यहाँ

शुद्ध जावास्क्रिप्ट केवल उदाहरण है:

var tempX = 0; 
    var tempY = 0; 

    function getMouseXY(e) { 
    if (IE) { // grab the x-y pos.s if browser is IE 
     tempX = event.clientX + document.body.scrollLeft; 
     tempY = event.clientY + document.body.scrollTop; 
    } 
    else { // grab the x-y pos.s if browser is NS 
     tempX = e.pageX; 
     tempY = e.pageY; 
    } 

    if (tempX < 0){tempX = 0;} 
    if (tempY < 0){tempY = 0;} 

    document.Show.MouseX.value = tempX;//MouseX is textbox 
    document.Show.MouseY.value = tempY;//MouseY is textbox 

    return true; 
    } 

Answer 2

विशेष रूप से MouseMove घटनाओं के साथ

, कि आग तेज और उग्र, करने के लिए अपने अच्छे हैंडलर का उपयोग करने से पहले उन्हें कम करें-

var whereAt= (function(){ 
    if(window.pageXOffset!= undefined){ 
     return function(ev){ 
      return [ev.clientX+window.pageXOffset, 
      ev.clientY+window.pageYOffset]; 
     } 
    } 
    else return function(){ 
     var ev= window.event, 
     d= document.documentElement, b= document.body; 
     return [ev.clientX+d.scrollLeft+ b.scrollLeft, 
     ev.clientY+d.scrollTop+ b.scrollTop]; 
    } 
})() 

document.ondblclick = फ़ंक्शन (ई) {अलर्ट (जहां एटी (ई))};

Answer 3

यह माउस निर्देशांक खोजने के लिए d3.js का उपयोग करने के लिए थोड़ा अधिक हो सकता है, लेकिन उनके पास d3.mouse(*container*) नामक एक बहुत ही उपयोगी फ़ंक्शन है। नीचे क्या आप क्या करना चाहते करने का एक उदाहरण है:

var coordinates = [0,0]; 
d3.select('html') // Selects the 'html' element 
    .on('mousemove', function() 
    { 
     coordinates = d3.mouse(this); // Gets the mouse coordinates with respect to 
            // the top of the page (because I selected 
            // 'html') 
    }); 

ऊपर मामले में, x- निर्देशांक coordinates[0] होगा, और y- निर्देशांक coordinates[1] होगा। यह बेहद आसान है, क्योंकि आप टैग के साथ 'html' का आदान-प्रदान करके किसी भी कंटेनर के संबंध में माउस निर्देशांक प्राप्त कर सकते हैं (उदा। 'body'), कक्षा का नाम (उदा। '.class_name'), या आईडी (उदा। '#element_id')।

Answer 4

यह कोशिश की है और सभी ब्राउज़रों में काम करता है:

function getMousePos(e) { 
     return {x:e.clientX,y:e.clientY}; 
    } 

अब आप इसे इस तरह की एक घटना में उपयोग कर सकते हैं:

document.onmousemove=function(e) { 
     var mousecoords = getMousePos(e); 
     alert(mousecoords.x);alert(mousecoords.y); 
    }; 

की