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

【问题标题】：jQuery event handling / propagation / bubbling?jQuery事件处理/传播/冒泡？
【发布时间】：2012-09-05 23:14:11
【问题描述】：

我正在尝试为网站创建一个菜单，为此我使用了 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 上时，应该显示 menuSelect（确实如此），但如果我将鼠标悬停在 menuAnchor 或 span 上，它会触发 mouseout 事件，然后触发 mouseover 事件。

所以，如果说，我将鼠标悬停在 menuNode 上，然后移到 span，然后再次移到 menuNode，它会触发 mouseover 事件 3 次。我之前在点击事件中遇到过这种行为，但用于解决此问题的方法似乎不适用于此问题。

有什么建议吗？

【问题讨论】：

尝试“mouseenter”和“mouseleave”而不是“mouseover”和“mouseout”。示例here 解释
参见 DOM 事件规范 here。

标签： javascript jquery html event-bubbling event-propagation

【解决方案1】：

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

【讨论】：