显示鼠标位置

时间:2015-09-18 15:23:13

标签: javascript html css

如何在div中显示鼠标的位置?一旦我们将鼠标移动到新位置,div中显示的值就会改变。

HTML

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

CSS

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

我希望鼠标的位置显示在黑色div&#34; info&#34;内部。每次移动时都必须刷​​新内部的值。每当我们移动它时都应该显示鼠标的位置。

1 个答案:

答案 0 :(得分: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作为参数传递非常重要。

您现在想要使用pageXpageY属性声明变量。它们分别返回鼠标位置的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);
});