Question

我想获得div的鼠标坐标，如下所示：

$("#box").mousemove(function(e){
var x = e.pageX - this.offsetLeft;
var y = e.pageY - this.offsetTop;

document.getElementById("coords").innerHTML = x + ", " + y; });

但我也希望能够判断光标是向左还是向右移动;我知道我只需将当前鼠标位置与之前的鼠标位置进行比较，但我不知道在这种情况下如何做到这一点。

任何帮助表示赞赏。谢谢

Answer 1

获取鼠标位置的jquery代码如下

jQuery(document).ready(function(){

   $(document).mousemove(function(e){
      $('#status').html(e.pageX +', '+ e.pageY);
   }); 
})

显然你必须有一个名为“status”的div

<div id="status">0, 0</div>

要检查光标是向右移动还是向右移动，您必须存储先前的位置，然后将其与新光标进行比较。

我在这里写了完整的例子：

http://jsfiddle.net/cB9Wq/

_ 编辑：

如果您需要在div中获取坐标，您还需要知道div的位置：

$(".div_container").mousemove(function(e){
        var relativeXPosition = (e.pageX - this.offsetLeft); //offset -> method allows you to retrieve the current position of an element 'relative' to the document
        var relativeYPosition = (e.pageY - this.offsetTop);
        $("#header").html("<p><strong>X-Position: </strong>"+relativeXPosition+" | <strong>Y-Position: </strong>"+relativeYPosition+"</p>")
    }).mouseout(function(){
        $("#header").html("<p>Move mouse on the below blue div container! :)</p>")
    });

要检查鼠标是向左还是向右，我使用了这个sintax：

xPrev<e.pageX ? $('#lr').html("right") : $('#lr').html("left");
xPrev=e.pageX;

注意：这相当于：

if(xPrev<e.pageX) { 
   $('#lr').html("right"); 
}
else {
   $('#lr').html("left"); 
}
xPrev=e.pageX;

这里有一个工作示例：http://jsfiddle.net/cB9Wq/2/

Answer 2

您可以使用以下解决方案：

webpack

jQuery：mousemove事件 - 左，右在元素内

2 个答案: