如何忽略jQuery中子元素的鼠标事件？

我有一个无序的列表，鼠标悬停和鼠标事件附加到李元素。每个包含一个链接，并在里面有一些填充。当我将鼠标悬停在li上时，mouseover事件被触发，但是当我在鼠标悬停链接中包含时，mouseout和mouseover事件都按顺序被触发。看起来孩子元素正在发射他们的父元素鼠标事件......我该如何着手阻止它呢？我希望它在鼠标悬停在链接上时保持鼠标悬停状态，而不是每次将鼠标悬停在链接上时都激活动画。这是我的代码;如何忽略jQuery中子元素的鼠标事件？

jQuery(document).ready(function(){ 
     jQuery('#menu li ul').hide(); 
     jQuery('#menu li').mouseover(function() { 
      jQuery(this).children("ul").show('fast').stop; 
      return false; 
     }); 
     jQuery('#menu li').mouseout(function() { 
      jQuery(this).children("ul").hide('fast').stop; 
      return false; 
     }); 
}); 

<ul id="menu"> 
     <li><a href="">Some link</a> 
      <ul>Sub content</ul> 
     </li> 
</ul>

来源

2009-04-19 Stephen Belanger

看来我已经找到了我自己的问题的答案。对于任何可能有同样问题的人，请尝试此代码。似乎悬停不会像其他鼠标事件那样冒泡到子元素中。

jQuery('#menu li').hover(
    function() { 
     jQuery(this).children('ul').show('fast'); 
     return false; 
    }, 
    function() { 
     jQuery(this).children('ul').hide('fast'); 
     return false; 
    } 
);

来源

2009-04-20 00:17:35

使用CSS类来区分不同的菜单级别。然后，您可以在jQuery选择器中轻松搜索一个类或另一个类。

来源

2009-04-19 22:53:05

不幸的是，这将是非常困难的，因为这是用于wordpress，它动态地注入所有这些，并且过滤输出相当复杂。 – 2009-04-19 23:17:41

使用 “事件stopPropagation（）。” 从向上冒泡停止事件：

jQuery('#menu li a').mouseover(function(evt) { 
     evt.stopPropagation(); 
     return false; 
    }); 
    jQuery('#menu li a').mouseout(function(evt) { 
     evt.stopPropagation(); 
     return false; 
    });

或者使用的，而不是鼠标悬停/出mouseenter和mouseleave事件。 jQuery规范化他们的行为跨浏览器，这些事件的好处是不冒泡...

来源

2009-04-19 22:57:38 James

我已经试过了，它似乎没有做任何事情。我也尝试使用mouseenter和mouseleave，他们也没有做任何事情。 – 2009-04-19 23:19:21

好的，我不是很对*。它会从链接中删除鼠标悬停，但是鼠标悬停是从li元素中调用的，而不是链接 - 所以它只是闪烁着打开，然后在我尝试将鼠标悬停时再次关闭。 – 2009-04-19 23:44:03

斯蒂芬自己提出的上述解决方案虽然看起来更直接，但如果您需要处理程序略微不同，例如好点。 – 2012-02-17 06:31:44

你可以试试这个

$('#menu li').live('mouseenter mouseleave', function (e) { 
    if (e.type == 'mouseenter') { 
     //Show ul 
    } else { 
     //Hide ul 
    } 
});

的优点是事件委派的使用。祝你好运！

来源

2010-11-10 11:54:32 podeig

我一直在寻找在JS的equivelant行为，其中在AS3中，你可以把：

object.mouseenabled = false;

我发现的方式工作得很好，是使用CSS和放：

.element { pointer-events: none; }

（但我想只有当你不需要任何元素时才可以使用它，我使用它作为悬停时弹出的工具提示，但不希望它在移走鼠标时变得怪异）。

来源

2012-06-15 17:21:06 dug

如何忽略jQuery中子元素的鼠标事件？

回答

相关问题