停止事件在Javascript

Question

冒泡我有一个HTML结构，如：从主DIV，而不是“A”或“UL”或“礼”的标签，才触发

<div onmouseover="enable_dropdown(1);" onmouseout="disable_dropdown(1);"> 

      My Groups <a href="#">(view all)</a> 
      <ul> 
       <li><strong>Group Name 1</strong></li> 
       <li><strong>Longer Group Name 2</strong></li> 
       <li><strong>Longer Group Name 3</strong></li> 
      </ul> 

      <hr /> 

      Featured Groups <a href="#">(view all)</a> 
      <ul> 
       <li><strong>Group Name 1</strong></li> 
       <li><strong>Longer Group Name 2</strong></li> 
       <li><strong>Longer Group Name 3</strong></li> 
      </ul> 

</div> 

我想要的onmouseout事件在div内！

我的onmouseout功能如下：

function disable_dropdown(d) 
{ 
    document.getElementById(d).style.visibility = "hidden"; 
} 

是否有人可以告诉我怎么可以停止冒泡事件？我尝试了其他网站上提供的解决方案（stopPropogation等），但我不确定如何在此上下文中实现它们。

任何帮助将不胜感激。

非常感谢！

Answer 1

您确实想要使用的事件是onmouseenter and onmouseleave，但是它们并未在所有浏览器中实现。你可以自己去实现它们，但是在这种情况下，使用一个已经解决了跨浏览器问题的库会更好。所以，在jQuery的

<div id="main"> 

      My Groups <a href="#">(view all)</a> 
      <ul> 
       <li><strong>Group Name 1</strong></li> 
       <li><strong>Longer Group Name 2</strong></li> 
       <li><strong>Longer Group Name 3</strong></li> 
      </ul> 

      <hr /> 

      Featured Groups <a href="#">(view all)</a> 
      <ul> 
       <li><strong>Group Name 1</strong></li> 
       <li><strong>Longer Group Name 2</strong></li> 
       <li><strong>Longer Group Name 3</strong></li> 
      </ul> 

</div> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> 
<script type="text/javascript"> 
    $('#main').hover(function() { enable_dropdown(1); }, // mouseenter 
         function() { disable_dropdown(1); }); // mouseleave 
</script>