Question

我为下拉菜单编写了一个程序，我希望代码在block上从显示none转到mouse out，但会触发mouse out事件甚至在它的子节点上我想防止这种情况发生有什么可能的解决方案？

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

使用most modern browsers（甚至是古老的IE），您可以使用mouseenter和mouseleave代替mouseover和mouseout。 mouseenter和mouseleave不会冒泡。

支持：

IE 5.5 +
Firefox 10 +
Chrome 30 +

停止在子节点上触发事件

1 个答案: