Question

使用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中的错误。

Answer 1

你的指针＆＃34;正在消耗一些用于＆＃34;外部＆＃34;元件。尝试光标和指针之间的间距。当你将鼠标移到外面时，该空间应该有助于保持指针离开，以便外部按预期获得事件

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

此更改Should work更好。

Answer 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
        }
    });
});

Mousemove延迟触发mouseleave事件

2 个答案: