Mousemove 延迟触发 mouseleave 事件

Question

Experiencing some strangeness with jQuery mouse events.遇到 jQuery 鼠标事件有些奇怪。 Check the jsFiddle at: https://jsfiddle.net/Lb8r3907/1/检查 jsFiddle： https://jsfiddle.net/Lb8r3907/1/

What I am trying to achieve is an inner element that when the mouse is over it, the pointer element will follow your cursor and when you mouse out of the inner element the pointer is then hidden.我想要实现的是一个内部元素，当鼠标悬停在它上面时，指针元素将跟随您的 cursor 并且当您将鼠标移出内部元素时，指针将被隐藏。

I have an outer element that fills the screen and the mouse enter / leave of this element shows and hides the pointer element that will follow your cursor.我有一个填充屏幕的外部元素，鼠标进入/离开该元素显示和隐藏将跟随您的 cursor 的指针元素。

 $(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>

What's really odd is that when the mousemove event is activated it seems to delay the firing of the mouseleave event.真正奇怪的是，当 mousemove 事件被激活时，它似乎延迟了 mouseleave 事件的触发。

I also notice that the delay really only seems to occurr when you mouse out on the right or bottom edge of the inner element.我还注意到，当您将鼠标移到内部元素的右侧或底部边缘时，延迟似乎只会发生。

Can anyone offer any insights as to why this is occurring??任何人都可以提供任何关于为什么会发生这种情况的见解吗？ I would really like to know how to address this issue or if it is a bug in the browser / jQuery.我真的很想知道如何解决这个问题，或者它是否是浏览器中的错误/jQuery。

Answer 1

Your "Pointer" is consuming some of the events intended for the "outer" element.您的“指针”正在消耗一些用于“外部”元素的事件。 Try some spacing between the cursor and the pointer.尝试在光标和指针之间留一些间距。 The space should help keep the pointer away when you mouse out to the outer, so that the outer gets its events as intended当您将鼠标移到外部时，该空间应该有助于使指针远离，以便外部按预期获取其事件

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

This change Should work better.这个改动应该效果更好。

Answer 2

I would have tackled this problem differently.我会以不同的方式解决这个问题。 Instead, I would use the boundary box of the .inner and add the .pointer if the cursor was inside.相反，如果光标在里面，我会使用 .inner 的边界框并添加 .pointer 。 This way you only need one mouse listener and the code is easier to understand (in my opinon):这样你只需要一个鼠标监听器，代码更容易理解（在我看来）：

html: html：

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

CSS (no change) CSS（无变化）

JS: 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
        }
    });
});

Answer 3

You can add CSS pointer-events:none;您可以添加 CSS pointer-events:none; to .pointer .到.pointer 。 pointer-events is supported in all major browsers所有主流浏览器都支持pointer-events

This CSS property, when set to "none" allows elements to not receive hover/click events, instead the event will occur on anything behind it.这个 CSS 属性，当设置为“none”时，允许元素不接收悬停/点击事件，而是该事件将发生在它后面的任何东西上。

https://caniuse.com/pointer-events https://caniuse.com/pointer-events

Mousemove 延迟触发 mouseleave 事件

问题描述

3 个解决方案

解决方案1
1 已采纳 2016-05-11 19:56:35

解决方案2
0 2016-05-11 20:23:56

解决方案3
0 2022-11-28 23:40:55

Mousemove 延迟触发 mouseleave 事件

问题描述

3 个解决方案

解决方案1 1 已采纳 2016-05-11 19:56:35

解决方案2 0 2016-05-11 20:23:56

解决方案3 0 2022-11-28 23:40:55

解决方案1
1 已采纳 2016-05-11 19:56:35

解决方案2
0 2016-05-11 20:23:56

解决方案3
0 2022-11-28 23:40:55