[英]jQuery event handling / propagation / bubbling?
我正在尝试为网站创建菜单,为此使用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上,然后移至范围,然后再次移至menuNode,它将触发mouseover事件3次。 在单击事件之前,我曾有此行为,但似乎用于解决此问题的方法不适用于此问题。
有什么建议么?
正如@ Beetroot-Beetroot所建议的那样,mouseenter / mouseleave提供了帮助,并结合了TimeOut从menuNode更改为menuSelect(进入时为300毫秒,离开时为500毫秒)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.