停止在子节点上触发事件

Question

I have written a program for a drop down menu, I want the code to go from display block to none on a mouse out but the mouse out event is triggered even on its child nodes I want to prevent that from happening what are the possible solutions ?

---

CSS

.dropdown{
        list-style: none;
        display: none;
        position: absolute; 
        background-color: skyblue;
    }

---

HTML

<button>Home</button>
    <div class="dropdown">
        <ul class="">
            <li><a href="">Home</a></li>
            <li><a href="">Contacts</a></li>
            <li><a href="">Other</a></li>
        </ul>
    </div>

    <script type="text/javascript">

        var button = document.getElementsByTagName('button')[0];
        var dropdown = document.getElementsByClassName('dropdown')[0];
        var ddChildNodes = document.querySelector('li');

        button.addEventListener('mouseover',function(){
            dropdown.style.display='block';
        },false);

        dropdown.addEventListener('mouseout',
            function(){
                    dropdown.style.display='none';
            },false);
    </script>

Answer 1

With most modern browsers (and even ancient IE), you can use mouseenter and mouseleave instead of mouseover and mouseout . mouseenter and mouseleave don't bubble.

Support:

• IE 5.5+
• Firefox 10+
• Chrome 30+