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/