javascript - javascript事件继承

Question

我正在使用一个列表来构建一个简单的导航菜单，它会在您悬停时显示并在您离开时隐藏。我希望菜单（ul）在 a 标签悬停时出现，只有在鼠标移出整个 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，它们是确保每次鼠标进入/离开元素时只会触发一次的特殊事件，即使它有子元素也是如此。

请参阅jQuery 中的 mouseenter/mouseleave 事件演示。