{"id":27,"date":"2007-10-21T23:44:29","date_gmt":"2007-10-21T20:44:29","guid":{"rendered":"http:\/\/www.held.org.il\/blog\/?p=27"},"modified":"2007-10-21T23:44:29","modified_gmt":"2007-10-21T20:44:29","slug":"onmouseout-event-of-a-container-div","status":"publish","type":"post","link":"http:\/\/www.held.org.il\/blog\/2007\/10\/onmouseout-event-of-a-container-div\/","title":{"rendered":"'onmouseout' event of a container div"},"content":{"rendered":"

Today I wanted to catch a 'mouse-out' event in a div. Every time the mouse leaves the div, I want to call a function So.. there's the onmouseout<\/a> event which, at first sight, does exactly what I needed.
\n
\n <div id=\"parent\" style=\"height: 500px; width: 500px;\" onmouseout=\"alert('out!');\">
\n<table id=\"child\"><tr><td>child text<\/td><\/tr>
\n<\/div><\/span>
\n<\/code><\/p>\n

HOWEVER - if the div<\/em> contains child elements (it usually does.. like above example), when mouse moves from the \"bare naked\" div<\/em> directly to its child element, an 'onmouseout' event is called from the div<\/em>, while the mouse is still inside the borders of the div<\/em>. And the worst news is that it's not a bug! \ud83d\ude42<\/p>\n

So straight to the sad solution: onmouseleave<\/em><\/strong><\/a> event does exactly what I needed, but isn't standard and is IE-only (same goes for onmouseenter<\/a>)<\/em>. As Rick summed it in the post which solved my issue today<\/a>: \"Bummer.\"<\/p>\n

So bummer, but the good thing is that among the reads, I've found this must-read article which talks about the order browsers handle the events<\/a>, and how to deal with it.<\/p>\n","protected":false},"excerpt":{"rendered":"

Today I wanted to catch a ‘mouse-out’ event in a div. Every time the mouse leaves the div, I want to call a function So.. there’s the onmouseout event which, at first sight, does exactly what I needed. <div id=”parent” style=”height: 500px; width: 500px;” onmouseout=”alert(‘out!’);”> <table id=”child”><tr><td>child text<\/td><\/tr> <\/div> HOWEVER – if the div contains […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[15],"tags":[55,66,202],"_links":{"self":[{"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/posts\/27"}],"collection":[{"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/comments?post=27"}],"version-history":[{"count":0,"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/posts\/27\/revisions"}],"wp:attachment":[{"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/media?parent=27"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/categories?post=27"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.held.org.il\/blog\/wp-json\/wp\/v2\/tags?post=27"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}