наследование событий javascript

Question

Я использую список для создания простого навигационного меню, которое показывает, когда вы наводите курсор, и скрывает, когда вы покидаете его. Я хочу, чтобы меню (ul) появлялось при наведении тега, и исчезало только при наведении курсора на весь div. Тем не менее, приведенный ниже код ударяет по мышке, когда каждый тег отключен, а не только тег div. Я предполагаю, что каждый дочерний тег наследует событие, но как мне обойти это?

<div id="Div1" onmouseout="alert('out')">
    <div id="header">
        <a href="#" onmouseover="alert('over')">Show Others</a>
    </div>
    <ul id="menu">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</div>

Answer 1

События при наведении курсора мыши могут показаться странными, и хуже всего то, что они различаются в разных браузерах. Я рекомендую вам использовать JavaScript-фреймворк, такой как jQuery , который поддерживает кросс-браузерную обработку mouseover и mouseout. Более того, он имеет mouseenter и mouseleave, которые являются специальными событиями, которые обязательно будут срабатывать только один раз при входе / выходе элемента мышью, даже если у него есть дочерние элементы.

См. демонстрацию событий mouseenter / mouseleave в jQuery .