Javascript Mousemove延迟触发mouseleave事件

在jQuery鼠标事件中遇到了一些奇怪的情况。 在以下位置检查JSFIDLE：

我试图实现的是一个内部元素，当鼠标在它上面时，指针元素将跟随您的光标，当您将鼠标移出内部元素时，指针将隐藏

我有一个填充屏幕的外部元素，该元素的鼠标输入/离开显示并隐藏光标后面的指针元素

$（函数（）{
$（'.outer'）。在（'mouseenter'，function（）上{
log（'MOUSE OVER OUTER！！'）；
如果（$（'.pointer'）。是（':visible'））{
$（'.pointer'）.fadeOut（50）；
}
});
//
$（'.outer'）。在（'mouseleave'，function（）上{
log（'MOUSE OUT OUT OUTER！！！'）；
如果（！$（'.pointer'）。是（':visible'））{
$（'.pointer'）.fadeIn（50）；
}
});
//
$（'.inner'）。on（'mousemove'，函数（e）{
var mX=e.pageX-$（'.inner'）.offset（）.left，
mY=e.pageY-$（'.inner'）.offset（）.top；
$（'.pointer'）.css（{“top”：mY+“px”，“left”：mX+“px”}）；
});
});
外部{位置：绝对；显示：块；z索引：0；顶部：0px；左侧：0px；宽度：100%；高度：100%；背景色：rgba（255,0,0,0.5）；}
.内部{位置：绝对；显示：块；z索引：1；顶部：50%；左侧：50%；宽度：50%；高度：25%；页边距顶部：-12.5%；页边距左侧：-25%；背景色：#fff；}
.inner.pointer{显示：块；位置：绝对；顶部：50%；左侧：50%；宽度：50px；高度：50px；背景色：蓝色；}

您的“指针”正在使用一些用于“外部”元素的事件。 尝试在光标和指针之间留出一定的间距。当您将鼠标移到外部时，空格应有助于使指针远离，以便外部按预期获取其事件

$('.pointer').css({"top": mY+2+"px", "left": mX+2+"px"});

---

这种改变会更好。

我会用不同的方法解决这个问题。相反，我将使用.inner的边界框，如果光标在里面，则添加.pointer。这样，您只需要一个鼠标侦听器，代码更容易理解（在我看来）：

html:

CSS（无变化）

JS:

$（函数（）{
var rect=$（'.inner'）[0].getBoundingClientRect（）；
$（'.container'）。on（'mousemove'，函数（e）{
var mX=e.pageX；
var mY=e.pageY；
//光标是否在边界内？
if（mX>rect.x&&mXrect.y&&mY

我刚刚发现了同样的东西，因为你的鼠标在“光标”块上，所以下/右键断开了。这种方法很管用（如果你以正确的速度向下/向右移动，你可以让块保持活动状态一段时间），最好在鼠标移动中添加一些检查来隐藏/显示块，而不是依赖于进入和离开事件。是的，你是对的，这不是一个修复方法，我主要是想展示场景背后发生了什么是的，很好，找到了！我认为这将使OP朝着正确的方向移动。我认为这部分解决了这个问题，因为如果光标速度非常快，它可以越过

指针

框，我建议在

中添加
溢出：隐藏
{位置：绝对；显示：块；z索引：1；顶部：50%；左侧：50%；宽度：50%；高度：25%；页边距顶部：-12.5%；页边距左侧：-25%；背景色：#fff；溢出：隐藏；}

@Baratravikumar非常感谢您的回答。这让我找到了问题的根源。您完全正确。“指针”元素在移动鼠标进入/离开事件时，就像移动鼠标跟随光标时，鼠标总是在其上一样。结合类似的解决方案，并将

溢出：隐藏
添加到容器元素似乎成功了！再次感谢！
<div class="container">
    <div class="outer"></div>
    <div class="inner">
        <div class="pointer" style="display:none;"></div>
    </div>
</div>

$(function() {
    var rect = $('.inner')[0].getBoundingClientRect();
    $('.container').on('mousemove', function(e) {
        var mX = e.pageX;
        var mY = e.pageY;
        // Is the cursor inside the boundaries?
        if(mX > rect.x && mX < rect.x + rect.width && mY > rect.y && mY < rect.y + rect.height ) {
            if(!$('.pointer').is(':visible')) {  // This can be optimized as well
                $('.pointer').show();
            }
            $('.pointer').css({"top": mY - rect.y, "left": mX - rect.x});
        } else {
            $('.pointer').hide(); // This can be optimized as well
        }
    });
});