Остановить всплывающее событие в Javascript - PullRequest
Новая
       39

Остановить всплывающее событие в Javascript

1 голос
/ 13 апреля 2010

У меня есть структура 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, а не через теги a или ul или li внутри div!

Моя функция onmouseout выглядит следующим образом: 

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

Может кто-нибудь сказать мне, как я могу предотвратить всплывание события? Я пробовал решения (stopPropogation и т. Д.), Представленные на других сайтах, но я не уверен, как реализовать их в этом контексте.

Любая помощь будет оценена.

Большое спасибо!

1 Ответ

0 голосов
/ 14 апреля 2010

События, которые вы действительно хотите использовать: 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>
...