1

私は次のような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が、このコンテキストでそれらを実装する方法がわかりません。

どんな助けでもありがたいです。

4

1 に答える 1

0

本当に使用したいイベントは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>
于 2010-04-13T20:05:05.853 に答える