onMouseMove có vị trí chuột

Question

Trong javascript, trong trình xử lý sự kiện javascript cho onMouseMove, làm thế nào để có được vị trí chuột trong x, y điều chỉnh tương đối so với đầu trang?

Answer 1

nếu bạn có thể sử dụng jQuery, sau đó this sẽ giúp:

<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> 

đây chỉ là javascript tinh khiết dụ:

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

Đặc biệt với sự kiện MouseMove, đó lửa nhanh và tức giận, tốt đẹp của nó để giảm bớt các trình xử lý trước khi bạn sử dụng chúng-

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 = function (e) {alert (trong đóAt (e))};

Answer 3

Có thể hơi quá mức để sử dụng d3.js chỉ để tìm tọa độ chuột, nhưng chúng có chức năng rất hữu ích được gọi là d3.mouse(*container*). Dưới đây là một ví dụ về làm những gì bạn muốn làm:

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') 
    }); 

Trong trường hợp trên, các tọa độ x sẽ coordinates[0], và y phối hợp sẽ coordinates[1]. Điều này cực kỳ tiện lợi, vì bạn có thể nhận tọa độ chuột đối với bất kỳ vùng chứa nào bạn muốn bằng cách trao đổi 'html' với thẻ (ví dụ: 'body'), tên lớp (ví dụ: '.class_name') hoặc id (ví dụ: '#element_id').

Answer 4

này là cố gắng và làm việc tại tất cả các trình duyệt:

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

Bây giờ bạn có thể sử dụng nó trong một sự kiện như thế này:

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