Question

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

我所看到的是，用户点击了一个菜单项，导致相关页面加载。如果他们没有移动光标，当下一页加载时，mouseover事件会自动触发，因为它们仍然悬停在菜单上！

发生这种情况时，用户没有意识到页面已加载;他们只是坐在那里等待。

如果您想了解我的意思，请访问www.snowrepublic.co.uk并点击说，手套，但不要移动光标。手套页面将加载，然后菜单将立即下拉。这是一个非常大的菜单，所以你可以看到混乱的来源！

这是我的代码：

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

在页面加载时停止鼠标悬停事件的任何方法吗？

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

Answer 1

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

将代码绑定在页面中出现的第一个鼠标移动中。

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

这只会在第一次鼠标移动时触发一次，然后绑定事件..所以在用户移动鼠标之前不会发生任何事情......

http://jsfiddle.net/gaby/4ALmC/embedded/result/

演示

参考：.one()

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

<强>更新

好的，这看起来像IE / FF 5+错误（或者jQuery bug ）..

现在的解决方法是将所有这些包装在超时中以避免这些浏览器中的初始混乱..

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

            // YOUR CODE HERE...

        });
    }, 100);
});

Answer 2

我希望大多数有这个问题的人都有一个与此类似的下拉菜单。将鼠标悬停在Your account或旁边的箭头上时，会出现菜单。只有当您点击顶部的Your Account文字进入页面时，才会出现问题。

enter image description here

对我来说，解决方案是阻止在将鼠标悬停在“您的帐户”上时出现下拉列表。文字（.menu-desc）。我只需检查网址，看看您是否已经访问了“您的帐户”，就可以做到这一点。页。我不喜欢这个解决方案，但它比其他人描述的更简单。

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

Answer 3

是的，没有。发生什么事情就是他们徘徊在它上面并触发它。在您的情况下，页面加载速度很快，并且在用户没有注意到更改的情况下触发。在我的情况下，我看到它消失了一瞬间。所以听听你能做什么。

让页面加载到顶部

$（'html，body'）。animate（{scrollTop：0}，0）;
添加动画，这样就可以更明显地加载新页面，并将它们悬停在链接上。
使用hoverintent插件（不会触发onmouseover n毫秒）
更改设计

Answer 4

我也遇到了同样的问题，但反过来说：我希望如果光标在特定元素上，则事件将在页面加载时触发。

起初，我使用的是'mouseenter'和'mouseleave'，它们不起作用，但是'mouseover'和'mouseout'的工作方式就像我想要的那样。

因此，对于您来说，“ mouseenter”和“ mouseleave”应该工作而不必绑定另一个事件来触发您实际想要的绑定（bah，难看！）。

页面加载时jQuery鼠标悬停

4 个答案: