防止子节点的mouseout事件

Question

我有图像列表,在图像上我想显示该图像的一些信息.而信息div的mouseout,同样应该消失.问题是当鼠标在info div的子标签上移动时,它甚至会触发mouseout,这不应该.我正在使用普通的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";
}

Answer 1

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

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