Отображение положения мыши

Question

Как вы можете отобразить положение мыши в div? Значения, отображаемые в div, должны меняться после перемещения мыши в новую позицию.

HTML

<div id="info"></div> 

CSS

#info{ 
position:absolute; 
bottom:20px; 
right:20px; 
width:100px; 
height:100px; 
background-color:black; 
} 

Я хочу, чтобы положение мыши будет отображаться внутри черного DIV «информация» .Отель значение внутри должен обновляться при каждом движении & должен отображать местоположение мыши, когда мы ее перемещаем.

Answer 1

Вот решение JQuery

$(document).ready(function() { 
    $(this).on("mousemove", function(event) { 
     var position = "X Coordinate: " + event.pageX + " Y Coordinate: " + event.pageY 
     $("div").filter("#info").text(position);  
    }); 
}); 

http://jsfiddle.net/L7zkvnqr/1/

Во-первых, вы прислушайтесь к mousemove события, и это важно, чтобы пройти в event в качестве параметра.

Теперь вы хотите объявить переменную, используя свойства pageX и pageY. Они возвращают координаты x и y вашего положения мыши соответственно.

Затем используйте функцию text() и передайте новую переменную позиции, которую вы только что определили.

Вот решение JavaScript

document.body.addEventListener("mousemove", function(event) { 
    var div = document.querySelector("#info"); 
    var position = "X Coordinate: " + event.clientX + " Y Coordinate: " + event.clientY; 
    div.innerHTML(position); 
});