Question

Text and sample code adapted from http://www.webdeveloper.com/forum/archive/index.php/t-65078.html, may not reflect actual question:

I have a div and then a div with a nested table inside it: also there is some div outside the parent div.

<div onmousemove="move()" onmouseout="out()">
  <div id="dvRep"> </div>
    <table>
        <tr><td>ITEM 1</td></tr>
        <tr><td>ITEM 2</td></tr>
        <tr><td>ITEM 3</td></tr>
        <tr><td>ITEM 4</td></tr>
        <tr><td>ITEM 5</td></tr>
    </table>
</div>

<div id="divChartPopupMenu">
    Hide me.     
</div>

Whenever I move my mouse within the div it correctly calls the move function, but the onmouseout attribute doesn’t work like I thought. I thought that the out() function would only be called if you moved your mouse off the div, but out() is called whenever I move off one of the table rows. So if my mouse is on a row and I move to the next row it calls out(). I want out() to be called only when the user moves off the entire div. any ideas?

What I am trying is on out function I am hiding another div.

Answer 1

i suggest you to read this article on 3 phases of javascript events.
http://www.quirksmode.org/js/events_order.html

in the function move or out, you can check if the srcElement(IE) or target(W3C) has an id called dvRep..

it should look something like this:

function out(event)
{
   event.stopPropagation(); //cancel bubbling

   ele = event.target || event.srcElement
   if (ele.id === "dvRep"){  
      //your code
   }
}