jQuery鼠标悬停在页面加载时

Question

我使用jQuery的mouseover事件创建了一个下拉菜单。我希望在页面加载时，如果光标位于菜单上方，则停止触发事件。

我看到的情况是，用户单击菜单项，导致相关页面加载。如果他们不移动光标，当下一个页面加载后，由于仍然悬停在菜单上方，mouseover事件会自动触发！

当这种情况发生时，用户并不知道页面已经加载；他们只是坐在那里等待。

如果您想了解我的意思，请访问www.snowrepublic.co.uk并单击例如Gloves，但不要移动光标。Gloves页面将加载，然后菜单将立即下拉。这是一个相当大的菜单，所以您可以看到混淆来自何处！

以下是我的代码：

<script type="text/javascript">
$(document).ready(function() {  
// Dropdown delay
  var $over = false;
  $('#header-nav li .nav').removeClass('drop');
  $('#header-nav li').mouseover(function(){
    $over = true;
    setTimeout( function(){ if ($over == true) $('#header-nav li .nav').addClass('drop'); }, 200 );
  });

  $('#header-nav li').mouseout(function(){
    $over = false;
    setTimeout( function(){ if ($over == false) $('#header-nav li .nav').removeClass('drop'); }, 200 );
  });
});
</script>

有没有办法在页面加载时停止mouseover事件的触发？

这很奇怪......我刚注意到这似乎是一个间歇性的问题。有时菜单在页面加载时不会下拉，而有时会下拉？？？

- Damian

Answer 1

不确定为什么会出现这种效果..但有一种方法可以确保它永远不会发生..

只需将您的代码绑定到页面上发生的第一个mousemove事件即可。

$(document).ready(function() { 
    $(document).one('mousemove', function() {  
      // YOUR CODE HERE...
    });
});

这将仅在第一次鼠标移动时触发，并绑定事件。因此，在用户移动鼠标之前不会发生任何事情...

演示：http://jsfiddle.net/gaby/4ALmC/embedded/result/

参考资料：.one()

.one() 方法与 .on() 相同，只是处理程序在第一次调用后解除绑定。

---

更新

好的，看起来这似乎是IE/FF 5+的一个bug（或者可能是jQuery的问题）。

现在的一个解决方法是将所有内容包裹在一个延迟执行函数中，以避免在这些浏览器中出现初始混乱。

$(document).ready(function() { 
    setTimeout(function(){
        $(document).one('mousemove', function() {  

            // YOUR CODE HERE...

        });
    }, 100);
});

- Gabriele Petrioli

---

我认为需要以某种方式绑定事件，以便在用户移动鼠标7个像素之前不会发生任何事情，而不仅仅是测试用户是否移动了鼠标，因为我已经测试了hoverIntent，并且似乎解决了问题，我知道hoverIntent直到鼠标移动了7像素才会触发。不幸的是，我不喜欢使用hoverIntent时从一个菜单项移动到另一个菜单项时出现的闪烁 :( - Damian

我已经在更多的浏览器中进行了测试，在 Opera、Safari 和 Chrome 中都没有问题。这个 bug 只在 Internet Explorer 和 FireFox 中出现。 - Damian

@Damian，刚刚发布了一个更新的解决方法，尽管它看起来像是浏览器或jQuery的错误行为。 - Gabriele Petrioli

那看起来已经解决了，Gaby！ - Damian

Answer 2

我认为大多数遇到这个问题的人都有一个类似于这样的下拉菜单。当你将鼠标悬停在“你的账户”或其旁边的箭头上时，菜单就会出现。所描述的问题只会在你点击顶部的“你的账户”文本并跳转到页面时才会发生。

对我来说，解决方案就是在悬停在“您的帐户”文本 (.menu-desc) 上时防止下拉菜单出现。我只需检查URL以查看您是否已经在“您的帐户”页面上，就能做到这一点。我不喜欢这个解决方案，但它比其他一些方案更简单。

$('.account-options .menu-desc').on('mouseenter', () =>
{
    if (window.location.href.toLowerCase().indexOf('youraccount') == -1)
    {
        // show menu and start timer to hide it
    }
});

- Simon_Weaver

Answer 3

是和不是。发生的情况是当他们悬停在上面时，它会触发。在你的情况下，页面加载很快，而用户没有注意到变化。在我的情况下，我看到它消失了一瞬间。所以这里有些事情你可以做。

1. 在加载时使页面返回顶部

   $('html, body').animate({ scrollTop: 0 }, 0);

2. 添加动画效果，以便更明显地显示新页面已加载，并且他们正在悬停在链接上。

3. 使用hoverintent插件（在n毫秒内不触发onmouseover）
4. 改变设计

- Yamiko

---

或者就像Gaby所说的那样。我没有想到那个。 - Yamiko

谢谢，我尝试使用hoverIntent，但不喜欢从一个菜单项移动到另一个菜单项时的效果；每次mouseout/mouseover时菜单都会消失和重新出现。 - Damian

我可以提出另一种复杂的方式（虽然从未尝试过，但是有想法），就是将所有内容放入一个函数中，并在以下情况之一运行该函数：a. 页面加载时，他们没有停留在该区域；b. 在页面加载期间，他们正在该区域内，直到离开该区域后再运行该函数。这将需要大量的代码，个人建议将屏幕移至顶部。 - Yamiko

Answer 4

我刚遇到了同样的问题，但是方向相反：如果光标在特定元素上，我希望在页面加载时触发一个事件。

起初我使用的是'mouseenter'和'mouseleave'，但是它们不起作用，而'mouseover'和'mouseout'则按照我的期望工作。

所以对于你来说，'mouseenter'和'mouseleave'应该可以工作，而无需绑定另一个事件来触发你实际想要的绑定（呃，丑陋！）。

- Lucas Venturini