javascript - JQuery Mousemove div 类 e.pageX 位置

Question

我正在使用这段代码:

$('.my_img').mousemove(function(e){
   $('.mycls').css("left",e.pageX-20+"px");
   $('.mycls').css("top",e.pageY-10+"px");

});

然后...

<div class="mycls">I Move</div>

然后...

<img class="my_img" src="myimg.png" />

我的问题是，如果我在这些 div 之上添加任何 div，位置就会改变，mycls 不再位于鼠标位置。

所以如果我要像这样在正文之后添加额外的 div:

<div>ONE</div>

<div>TWO</div>

...然后剩下的代码...我将失去位置 :o/

关于如何排序的任何想法？

Answer 1

由于 e.pageX 和 e.pageY 值是相对于整个页面的，因此您的代码不应受到添加新元素的影响。如果您将 top 和 left 设置为一个元素，它定义了它与页面顶部和左侧的距离。

唯一可能出现问题的情况是，如果您在 mycls div 的任何父元素上设置了 position:relative。删除 position:relative，以便 top 和 left 指的是整个页面而不是父元素。