onMouseOver and Child Elements

I maybe way behind on this and I’m not sure how I haven’t encountered this little quirk in javascript until now but apparently the onmouseover (and subsequently onmouseout) event fires repeatedly at unexpected times. For example if you add an event to a <div> that encompasses child elements, every time you pass over a child element you the onmouseover and onmouseout event fire sequentially.

This makes your onmouseover event handler execute many many many more times than you’d expect. Click here for an example for this in action. To get around this little nuisance of javascript you have to check if the event happens within the parent element and filter these out.

I’m currently in love with the Ext JS framework (and have been since Jack first published it on this blog) so the following solution is based on that framework. But other frameworks have similar event handling functions.

var div = Ext.get('divId');
var over = function(e, el, divId) {
// within returns whether or not event
// appears in this parent element.
    if(!e.within(Ext.get('divId'), true)) {
div.on('mouseover', over, this, 'divId');

AdMob AdMonitor

My current gig is at AdMob and we recently re-did the home page and took out a small little widget that had a live scrolling ticker of actual ad requests. When we redesigned the home page there just wasn’t room for it anymore. A lot of people were sad to see it go. Except now we’ve brought it back in full force! We’ve even been mentioned on TechCrunch! (A little dream of mine for a while, not because I like Arrington or anything, but because it’s the 4th largest blog.) Here’s my original post on our company’s website.

AdMob AdMonitor

Technical stuff:
The page is a combination of Google Maps, YUI, Ext JS, Fusion Gadgets, and our own internal API. The prototype was thrown together in a couple hours and then design, marketing, and our CEO Omar got involved and it evolved into what you see today. The joys of working at a fast paced company, I love it! 🙂