停止事件在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>