{"id":174,"date":"2009-02-19T22:15:14","date_gmt":"2009-02-20T03:15:14","guid":{"rendered":"http:\/\/mikeconley.ca\/blog\/?p=174"},"modified":"2023-12-20T16:25:22","modified_gmt":"2023-12-20T21:25:22","slug":"mouseover-mouseout-on-nested-elements","status":"publish","type":"post","link":"https:\/\/mikeconley.ca\/blog\/2009\/02\/19\/mouseover-mouseout-on-nested-elements\/","title":{"rendered":"Mouseover \/ Mouseout on Nested Elements"},"content":{"rendered":"

Did I mention I’m code-sprinting over the next three days?\u00a0 Actually, next two days – I just finished my first day today.<\/p>\n

What’s code-sprinting?\u00a0 It’s a trendy term for sitting down with your team, and plowing through code en masse, trying to get as much done as possible.\u00a0 8 hour days, cookies, coffee, whiteboards, pizza, crashes, bugs, tickets, fixes, etc.\u00a0 We’re trying to cram 3 weeks of work into 3 days.\u00a0 Cool.<\/p>\n

In case you don’t remember, I’m working on a project called Checkmark (or OLM…still undecided on the name) – a tool for Professors\/TAs to receive student code submissions, and to facilitate easy marking and annotating of the submitted code.<\/p>\n

So here’s something I learned today while coding:<\/p>\n

Say you have some nested DIV’s, and the parent DIV has a mouseout trigger.\u00a0 Something like this:<\/p>\n

<div id=\"parent\" onMouseOut=\"alert('Mouseout triggered on parent');\">\r\n  <div id=\"child_1\">This is some child<\/div>\r\n  <div id=\"child_2\">This is another child<\/div>\r\n<\/div><\/pre>\n
As you would expect, the mouseout event will get triggered if you move your mouse over the parent DIV, and then move the mouse back out again.<\/p>\n
But it also gets triggered when you move your mouse OVER any of the child DIV’s. <\/strong><\/p>\n
Say what?\u00a0 That’s right – even though you’re still inside the parent DIV, the mouseout event got triggered.\u00a0 I found this out today when I was trying to code dropdown menus in Javascript\/CSS using Prototype – I could get the dropdown menus to appear find when I clicked on the appropriate button, but they’d disappear again as soon as I put my mouse over any of the sub-elements of the DIV.<\/p>\n
So how did I fix this?\u00a0 I found this example code<\/a>, and adapted it for my purposes.\u00a0 This code assumes that you’re using the Prototype Javascript library.<\/p>\n
$('some_dropdown').observe('mouseout',\r\n  function(event) {\r\n     \/\/We could probably replace the following with Event.element(event), but oh well.\r\n     var target = $('some_dropdown');\r\n     var mouse_over_element;  \/\/What the mouse is currently over...\r\n     \/\/So let's check to see what the mouse is now over, and assign it to mouse_over_element...\r\n     if( event.toElement ) {\r\n        mouse_over_element = event.toElement;\r\n     }\r\n     else if(event.relatedTarget) {\r\n       mouse_over_element = event.relatedTarget;\r\n     }\r\n     \/\/In the event that the mouse is over something outside the DOM (like an alert window)...\r\n     if(mouse_over_element == null) {\r\n        return;\r\n     }\r\n     \/\/Now we just make sure that what the mouse is currently over is NOT a descendant of\r\n     \/\/the dropdown, and that the target is not the current mouse_over_element (I can't\r\n     \/\/remember which case this covers, but it's important)\r\n     if(!mouse_over_element.descendantOf(target) && target != mouse_over_element) {\r\n        target.hide();\r\n     }\r\n   }\r\n );<\/pre>\n
And it works.\u00a0 Whew!\u00a0 Just thought I’d share that little snippit.<\/p>\n","protected":false},"excerpt":{"rendered":"
Did I mention I’m code-sprinting over the next three days?\u00a0 Actually, next two days – I just finished my first day today. What’s code-sprinting?\u00a0 It’s a trendy term for sitting down with your team, and plowing through code en masse, trying to get as much done as possible.\u00a0 8 hour days, cookies, coffee, whiteboards, pizza, […]<\/p>\n","protected":false},"author":4,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[5,44,68],"tags":[69,71,37,1212,74,73,72,76,75,70,54],"class_list":["post-174","post","type-post","status-publish","format-standard","hentry","category-computer-science","category-internet","category-javascript","tag-dom","tag-event","tag-event-handling","tag-javascript","tag-mouse","tag-mouseout","tag-mouseover","tag-nested","tag-nested-divs","tag-prototype","tag-web-applications"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/prmTy-2O","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mikeconley.ca\/blog\/wp-json\/wp\/v2\/posts\/174","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mikeconley.ca\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mikeconley.ca\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mikeconley.ca\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/mikeconley.ca\/blog\/wp-json\/wp\/v2\/comments?post=174"}],"version-history":[{"count":4,"href":"https:\/\/mikeconley.ca\/blog\/wp-json\/wp\/v2\/posts\/174\/revisions"}],"predecessor-version":[{"id":178,"href":"https:\/\/mikeconley.ca\/blog\/wp-json\/wp\/v2\/posts\/174\/revisions\/178"}],"wp:attachment":[{"href":"https:\/\/mikeconley.ca\/blog\/wp-json\/wp\/v2\/media?parent=174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mikeconley.ca\/blog\/wp-json\/wp\/v2\/categories?post=174"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mikeconley.ca\/blog\/wp-json\/wp\/v2\/tags?post=174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}