mousemove无法正常工作

Question

我是jquery mousemove事件的新手，这是我的代码

<div id="a1" style="width:100%;height:100%;top:0px;left:0px; position:absolute">
  <div id="tracker1">
  </div>
</div>


$(a1).mousemove(function(event) {
   var x = event.pageX;
   var y = event.pageY;
   var absolutePositionx = x - $('#a1').offset().left;
   var absolutePositiony = y - $('#a1').offset().top;

   $("#tracker1").css({
     left: absolutePositionx,
     top: absolutePositiony
   });
});

JSFIDDLE

问题是当我在边框上慢慢移动鼠标时，跟踪器（红点）有可能会移出元素，这是非常奇怪的，不应该发生。当光标超出指定元素时，为什么mousemove事件仍会触发？ 任何帮助表示赞赏！

Answer 1

这种情况正在发生，因为点或跟踪器嵌套在您跟踪鼠标移动的位置，因此当您移动缓慢时，此鼠标仅移动点，这会触发鼠标移动事件。你可以像这样解决它：

<!-- change this -->
<div class="a1" id="a1" style="width:100%;height:100%;top:0px;left:0px; position:absolute">
    <div id="tracker1">
    </div>
</div>

<!-- to this -->
<div class="a1" id="a1" style="width:100%;height:100%;top:0px;left:0px; position:absolute">
</div>

<div id="tracker1">
</div>

<!-- for all 3 instances -->

https://jsfiddle.net/amw2oou9/1/

Answer 2

将属性overflow: hidden添加到.a1 .b1和.c1会为我修复此问题！