一千萬個為什麽

搜索

停止Javascript中的事件冒泡

我有一個像html結構:

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

            My Groups (view all)
            
  • Group Name 1
  • Longer Group Name 2
  • Longer Group Name 3
            

            Featured Groups (view all)
            
  • Group Name 1
  • Longer Group Name 2
  • Longer Group Name 3
</div>

我希望onmouseout事件只能從div中觸發,而不是div中的'a'或'ul'或'li'標簽!

我的onmouseout功能如下:

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

有人可以告訴我如何阻止事件冒泡?我嘗試了其他網站上提供的解決方案(stopPropogation等),但我不確定如何在此上下文中實現它們。

任何幫助將不勝感激。

非常感謝!

最佳答案

您真正想要使用的事件是 onmouseenter and onmouseleave ,但並未在所有瀏覽器中實現。您可以自己實現它們,但是在這種情況下,最好使用已經為您解決跨瀏覽器問題的庫。所以,在jQuery中

<div id="main">

            My Groups (view all)
            
  • Group Name 1
  • Longer Group Name 2
  • Longer Group Name 3
            

            Featured Groups (view all)
            
  • Group Name 1
  • Longer Group Name 2
  • Longer Group Name 3
</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>

轉載註明原文: 停止Javascript中的事件冒泡