javascript - 离开每个 li 标签时运行一个函数，但在 ul 标签中定义了鼠标移出

Question

我有一个 ul 标签，它有一个 onmouseout 功能。ul 包含 4 个 li 元素。我希望在离开 ul 时调用一个函数，但当我从一个 li 转到另一个 li 时调用它。我的错误在哪里？

我的 list 是:

<ul id="settings" style="position:fixed;" onmouseout="alert(20);">
<li><a href="#">111</a></li>
<li><a href="#">222</a></li>
<li><a href="#">333</a></li>
<li><a href="#">444</a></li>
</ul>

Answer 1

处理 ul 上的 onmouseout 是有点棘手，是的。你需要照顾event bubbling因为 onmouseout 可以在 a 或 li 上触发并传播回 ul。因此，即使您离开子元素 - 除非明确阻止传播，否则将为 ul 触发事件。

既然你有 jQuery 标签，我可以建议这种干净简单的方法:

Demo

HTML:

<ul id="settings" style="position:fixed;">
    <li><a href="#">111</a></li>
    <li><a href="#">222</a></li>
    <li><a href="#">333</a></li>
    <li><a href="#">444</a></li>
</ul>

JS:

$("#settings").mouseleave(function() {
    // Better to debug with console.log()
    // alert(20); 
    console.log(20);
});