javascript - preventing mouseout event for child node - Stack Overflow

admin管理员组

文章数量:1335407

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

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

• javascript
• mouseout

Share Improve this question Follow edited Jul 20, 2009 at 4:15 munity wiki
2 revs, 2 users 73%
vinay 2

• Why was this post made munity wiki? – rahul Commented Jul 20, 2009 at 4:20
• You won't get answers because people don't get points on a cWiki... – James Commented Jul 20, 2009 at 6:35

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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>

That is the behavior of mouseover. If you were using jQuery however, you could use mouseenter/mouseleave events.

本文标签： javascriptpreventing mouseout event for child nodeStack Overflow