jQuery事件处理/传播/冒泡？

Question

我正在尝试为一个网站创建一个菜单，我正在使用jQuery来做这件事，我遇到了一个小问题。

我有这样的结构

<div class="menuTitle menuDiv menuNode" id="menuNode_<?=$row_menu["id"]?>">
    <a href="<?=$rt?>" class="menuAnchor" onclick="return registerMenuClick($(this).parent())">
        <span><?=$nodeName?></span>
    </a>
</div>

<div class="menuSelect" id="menuSelect_<?=$row_menu["id"]?>" align="center"><?=$nodeName?></div>

在jQuery中，我有

$(document).ready(function(){
    $(".menuNode, .menuSelect").live("mouseover",function(event){
    MenuBar.selectedID = $(this).attr("id").replace("menuNode_","").replace("menuSelect_","");
    MenuBar.showThisBranch();
  }).live("mouseout",function(event){
    MenuBar.selectedID = $(this).attr("id").replace("menuNode_","").replace("menuSelect_","");
    MenuBar.hideThisBranch();
  });
})

当用户将鼠标悬停在menuNode上时，应该显示鼠标，但如果我将鼠标悬停在menuAnchor或跨度上，它会触发mouseout事件，然后触发mouseover事件。

因此，假设我将鼠标放在menuNode上，然后移动到跨度，然后再次移到menuNode，它将触发mouseover事件3次。我以前在点击事件上有过这种行为，但用来解决这个问题的方法似乎对这个问题不起作用。

有什么建议吗？

Answer 1

正如@Beetroot-Beetroot建议的那样，mouseenter/mouseleave提供了帮助，加上一个从menuNode更改为menuSelect的TimeOut (进入时为300毫秒，离开时为500毫秒)。