Question

我在这里测试了一些东西，所以请原谅css规则。我在div中有一个 ul 列表，我试图在div的mouseout上触发一个警告，但是警告触发每次我鼠标移除 ul 中的 li 项目。有人可以告诉我背后的原因吗？我猜它有点冒泡但我不确定。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style>
#box{
cursor:pointer;width:300px;height:500px;background-color:#F1E0BB;
}

ul#myList{
list-style:none;padding-top:20px;
}

ul#myList li{
font-family:Arial;font-size:20px;font-weight:bold;height:40px;cursor:pointer;border:solid 1px #000;
}
</style>
</head>
<body>

<div id="box">
    <ul id="myList">
        <li>Item 11</li>
        <li>Item 12</li>
        <li>Item 13</li>
        <li>Item 14</li>
        <li>Item 15</li>
    </ul>
</div>


</body>
</html>

我使用的Jquery脚本

$('#box').mouseout(function(){

alert("ccc");

})

Answer 1

请改用此处mouseleave event，离开孩子时不会触发：

$('#box').mouseleave(function(){
  alert("ccc");
});

你假设冒泡是正确的，那些冒泡的子元素正在触发你的处理程序。来自.mouseleave()文档：

mouseleave事件处理事件冒泡的方式与mouseout不同。如果在此示例中使用mouseout，则当鼠标指针移出内部元素时，将触发处理程序。这通常是不受欢迎的行为。另一方面，mouseleave事件仅在鼠标离开绑定的元素而不是后代时触发其处理程序。因此，在此示例中，当鼠标离开外部元素而不是内部元素时，将触发处理程序。

在div的鼠标输出时触发警报

1 个答案: