防止子节点的mouseout事件 [英] preventing mouseout event for child node

问题描述

我有图像列表，在图像上我希望显示该图像的一些信息。而信息div的mouseout，同样应该消失。问题是当鼠标在info div的子标签上移动时，它甚至会触发mouseout，这不应该。我正在使用普通的JavaScript。

I have list of images, on over on image i want to show some information on that image. And mouseout of the info div, same should disappear. Problem is when mouse moves on child tag of info div it fires mouseout even, which should not. And i am using normal JavaScript.

<div id="pop_div" onmouseout="clearinfo()" >
   <img alt="" src="" />
   <p>lines of text</p>
</div>


function clearinfo()
{
  document.getElementById("pop_div").style.dispaly = "none";
}

推荐答案

您可以模拟mouseleave的行为事件：

You can emulate behavior of mouseleave event:

<div id="pop_div" onmouseout="if ((event.relatedTarget || event.toElement) == this.parentNode) clearinfo()" >
   <img alt="" src="" />
   <p>lines of text</p>
</div>

这篇关于防止子节点的mouseout事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！