鼠標移動工作不正常

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爲我修復它！