{"id":42,"date":"2008-02-18T18:32:04","date_gmt":"2008-02-18T18:32:04","guid":{"rendered":"http:\/\/todepoint.com\/blog\/2008\/02\/18\/windowonblur-strange-behavior-on-browsers\/"},"modified":"2008-02-18T18:32:04","modified_gmt":"2008-02-18T18:32:04","slug":"windowonblur-strange-behavior-on-browsers","status":"publish","type":"post","link":"https:\/\/todepoint.com\/blog\/2008\/02\/18\/windowonblur-strange-behavior-on-browsers\/","title":{"rendered":"window.onblur – strange behavior on browsers"},"content":{"rendered":"

About a year ago I posted an example<\/a> for using externalInterface to start and stop sound inside flash, based on focus and blur events in the window. After recently receiving several comments and questions about strange behavior on different browsers, I decided to test the script on the browsers I have on my Mac and PC.<\/p>\n

Originally I was using the onFocus<\/strong> & onBlur<\/strong> events, attached to the window object, I found out that each browser can deal with these event when attached to a different object, I started testing which object works for each browser, and added browser sniffer for the listener definition, these are the objects for each browser:
\n<\/p>\n\n\n\n\n\n
Browser<\/td>\nObject<\/td>\n<\/tr>\n
Safari, Opera, Omniweb<\/td>\nwindow<\/td>\n<\/tr>\n
Firefox <\/td>\nwindow.document<\/td>\n<\/tr>\n
IE7<\/td>\ndocument.body (* partially working)<\/small><\/td>\n<\/tr>\n<\/table>\n

<\/ins>
\n<\/p>\n

And here are the results:
\n<\/p>\n\n\n\n\n\n\n
Mac OS X 10.5.2 Leopard<\/td>\n<\/tr>\n
Safari<\/td>\nAll working fine.<\/td>\n<\/tr>\n
Firefox<\/td>\nonblur is only fired when loosing focus to another Firefox window, not to another app.<\/td>\n<\/tr>\n
Opera<\/td>\nAll working fine.<\/td>\n<\/tr>\n
Omniweb<\/td>\nAll working fine.<\/td>\n<\/tr>\n<\/table>\n

<\/p>\n\n\n\n\n
Windows XP<\/td>\n<\/tr>\n
IE7<\/td>\n\n
    \n
  1. With Tabbing enabled: onblur is fired upon focus event, no event corresponds with blur.<\/li>\n
  2. With Tabbing disabled: onblur fires properly if clicked on title area, once clicked on body (content of page) behaves the same as with Tabbing enabled..<\/li>\n<\/ol>\n<\/td>\n<\/tr>\n
Firefox<\/td>\nonfocus is fired twice when clicked on body, once when clicked on browser title.<\/td>\n<\/tr>\n<\/table>\n

<\/ins>
\n<\/p>\n

The situation on Mac seems to be much better than on Windows XP (sorry, I did not test Vista, so if someone can try this on Vista and send me the results – it would be great), currently both IE7 and Firefox on XP have strange behavior.
\nWith IE7 it gets even weirder, when IE7 has Tabbing enabled, it can’t handle onblur event for body object, while without tabbing, onblur works if clicked on the browser title area, once clicked inside the window (Html body) “something” goes crazy and both onfocus and onblur are fired together upon focus event.<\/p>\n

Here is the test page<\/a>, you will find the events I tested for IE7 commented in the page source.<\/p>\n

Does anyone know a way around this strange behavior on IE7 and Firefox?
\nany way to make this listener compatible with all browsers?<\/p>\n","protected":false},"excerpt":{"rendered":"

About a year ago I posted an example for using externalInterface to start and stop sound inside flash, based on focus and blur events in the window. After recently receiving several comments and questions about strange behavior on different browsers, I decided to test the...<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[23],"tags":[33,37,38],"_links":{"self":[{"href":"https:\/\/todepoint.com\/blog\/wp-json\/wp\/v2\/posts\/42"}],"collection":[{"href":"https:\/\/todepoint.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/todepoint.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/todepoint.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/todepoint.com\/blog\/wp-json\/wp\/v2\/comments?post=42"}],"version-history":[{"count":0,"href":"https:\/\/todepoint.com\/blog\/wp-json\/wp\/v2\/posts\/42\/revisions"}],"wp:attachment":[{"href":"https:\/\/todepoint.com\/blog\/wp-json\/wp\/v2\/media?parent=42"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/todepoint.com\/blog\/wp-json\/wp\/v2\/categories?post=42"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/todepoint.com\/blog\/wp-json\/wp\/v2\/tags?post=42"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}