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

Question

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

我的清单是：

<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

处理有点棘手，是的onmouseout。ul您需要注意事件冒泡，因为onmouseout可以触发a或li传播回ul. 因此，即使您要离开子元素 -ul除非明确阻止传播，否则将触发事件。

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

演示

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);
});