我有这个小问题,我请求你的帮助。我有一个div元素,里面有一个img元素,像这样
<div id="parent" onmouseover="MyFuncHover()" onmouseout="MyFuncOut()">
<img id="child" src="button.png" style="visibility: hidden" />
</div>
<script type="text/javascript">
function MyFuncHover() {
// Here I have some code that makes the "child" visible
}
function MyFuncOut() {
// Here I have some code that makes the "child" invisible again
}
</script>
如您所见,图像是div的子级。我希望只有当我离开div时,孩子才会消失。然而,看起来当我将鼠标移到图像上时,调用了MyFuncOut()函数(因为,我想,我通过悬停图像离开了 div)。我不希望这种情况发生。我希望仅在离开div区域时调用MyFuncOut()函数。
我不知道当您将鼠标移到子控件上时,它的父级会调用 mouseout 事件(即使我在子级之上,我仍然在父级之上)。我陷入了困境,我需要你的一些好建议。谢谢!
变化
OK 当我“鼠标移出”孩子时,事件冒泡不会将“鼠标移出”事件发送给父级。当我“鼠标悬停”孩子时,它也不会向父母发送“鼠标悬停”事件。那不是我需要的。当我“鼠标悬停”孩子时,我需要不发送父母的“mouseout”事件。得到它?例如,当我不希望将子项上的单击事件传播给父项时,事件冒泡很有用,但这不是我的情况。奇怪的是,当我“将鼠标悬停”它们时,我在同一个父级中还有其他元素不会触发父级的“mouseout”事件。