停止 Javascript 中的事件冒泡

Question

我有一個 html 結構，如：

<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 觸發，而不是 div 中的“a”或“ul”或“li”標簽！

我的onmouseout功能如下：

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

有人可以告訴我如何阻止事件冒泡嗎？ 我嘗試了其他網站上提供的解決方案（ stopPropogatio等），但我不確定如何在這種情況下實施它們。

任何幫助將不勝感激。

Answer 1

您真正想要使用的事件是onmouseenter 和 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>