Mousemove 延迟触发 mouseleave 事件答案

【问题标题】：Mousemove delays firing mouseleave eventMousemove 延迟触发 mouseleave 事件
【发布时间】：2016-05-11 19:42:27
【问题描述】：

在使用 jQuery 鼠标事件时遇到了一些奇怪的事情。检查 jsFiddle：https://jsfiddle.net/Lb8r3907/1/

我想要实现的是一个内部元素，当鼠标悬停在它上面时，指针元素将跟随你的光标，当你将鼠标移出内部元素时，指针就会被隐藏。

我有一个填充屏幕的外部元素，鼠标进入/离开该元素会显示和隐藏将跟随光标的指针元素。

$(function() {
  $('.outer').on('mouseenter', function(){
    console.log('MOUSE OVER OUTER!!');
    if($('.pointer').is(':visible')){
      $('.pointer').fadeOut(50);
    }
  });
  //
  $('.outer').on('mouseleave', function(){
    console.log('MOUSE OUT OF OUTER!!!');
    if(!$('.pointer').is(':visible')){
      $('.pointer').fadeIn(50);
    }
  });
  //
  $('.inner').on('mousemove', function(e){
    var mX = e.pageX-$('.inner').offset().left,
    mY = e.pageY-$('.inner').offset().top;
    $('.pointer').css({"top": mY+"px", "left": mX+"px"});
  });
});

.outer { position:absolute; display:block; z-index:0; top:0px; left:0px; width:100%; height:100%; background-color:rgba(255,0,0,0.5); }
.inner { position:absolute; display:block; z-index:1; top:50%; left:50%; width:50%; height:25%; margin-top:-12.5%; margin-left:-25%; background-color:#fff; }
.inner .pointer { display:block; position:absolute; top:50%; left:50%; width:50px; height:50px; background-color:blue; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<body>
  <div class="outer"></div>
  <div class="inner">
    <div class="pointer" style="display:none;"></div>
  </div>
</body>

真正奇怪的是，当 mousemove 事件被激活时，它似乎延迟了 mouseleave 事件的触发。

我还注意到，延迟似乎只有在您将鼠标移到内部元素的右边缘或下边缘时才会发生。

任何人都可以提供任何关于为什么会发生这种情况的见解吗？我真的很想知道如何解决这个问题，或者它是否是浏览器/jQuery 中的错误。

【问题讨论】：

标签： javascript jquery mouseevent mousemove

【解决方案1】：

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

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

这个改Should work更好。

【讨论】：

我只是发现了同样的东西，向下/向右坏了，因为你的鼠标在'光标'块上。这种方法有点工作（如果你以正确的速度向下/向右移动，你可以让块保持活动一段时间）可能会更好地在 mousemove 内部添加一些检查以隐藏/显示块，而不是依赖于进入和离开事件。
是的，你是对的，这不是解决办法，我主要是为了演示幕后发生的事情
是的，还是找到了！我认为这将使 OP 朝着正确的方向发展。
我认为这部分解决了问题，因为如果光标加速非常快，它可以越过pointer框，我建议在.inner { position:absolute; display:block; z-index:1; top:50%; left:50%; width:50%; height:25%; margin-top:-12.5%; margin-left:-25%; background-color:#fff; overflow:hidden;}中添加overflow: hidden
@BarathRavikumar 非常感谢您的回答。这使我找到了问题的根源。你完全正确。 “指针”元素正在劫持鼠标进入/离开事件，因为当移动它以跟随光标时，鼠标总是在它上面。结合类似的解决方案并将overflow:hidden 添加到容器元素似乎可以解决问题！再次感谢！

【解决方案2】：

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

html:

<div class="container">
    <div class="outer"></div>
    <div class="inner">
        <div class="pointer" style="display:none;"></div>
    </div>
</div>

CSS（不变）

JS：

$(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
        }
    });
});

【讨论】：