Oct 28

Javascript Event Bubbling

When it comes its support for web standards, I've never thought of IE as being that bad. Yeah, it has its quirks, but it's not as bad as most people think. I've done some pretty complex layouts and I've never come across any problems with IE that are insurmountable…until now. The interesting thing is that it's not a problem with HTML or CSS support to which I'm referring, but instead a problem with its event handling.

I was trying to write a simple script to create little event popups (or popovers, as I like to call them, since they're not separate browser windows) for a grid calendar. Now, of course, I went about doing it the correct way through progressive enhancement, which involves taking an existing page and adding event handlers dynamically, without any embedded JS. This worked easily in Firefox, where I do most of my development, but when I tested it in IE 7, I just couldn't get it to work.

Here's the basic concept I was implementing: the user mouses over a link on the calendar, and that shows a little popover with detailed information. Now, that popover is actually a link being styled as a block element, so that way the entire area of the popover can easily accept mouse events. When the user's mouse leaves the calendar link that activated the popover, a timeout is set so that the popover is hidden within one second if nothing else happens. But if the user mouses over the popover, the timeout is deleted so that the popover remains visible.

I've used this technique before with great success, but for some reason it wasn't working this time. After a little testing, I figured out that the function being called by the popover wasn't receiving any reference to the popover element, which didn't make any sense, because it was receiving the reference in Firefox. After some more debugging, I discovered that the function was receiving a reference to the element initiating the mouseover event, but the problem was that the element was a span inside the link, instead of the link itself.

That made me remember research I had done a while ago on event bubbling, so I began that research anew, and came across a great article on understanding event bubbling called Event Order at Quirksmode.org. So, it turns out that since I had additional elements inside my popover link (which was handling the events for the popover), it is actually impossible in IE to discover which element was supposed to be controlling the event. Wow, that's really disturbing…why would Microsoft make an oversight like that?

So I ended up using jQuery, which is pretty cool. I had never used it before (and it has its own issues), but it did make my script shorter and somehow has its own workarounds to the IE event bubbling issue.

Event Bubbling Resources I've found useful: