鼠标移动工作不正常

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为我修复它！