Event not bubbling in some Browsers when clicked on Flash

Posted by 166_MMX on Stack Overflow See other posts from Stack Overflow or by 166_MMX
Published on 2010-07-21T16:41:35Z Indexed on 2011/01/06 20:53 UTC
Read the original article Hit count: 527

Environment: Windows 7, Internet Explorer 8, Flash ActiveX 10.1.53.64, wmode=transparent

Just wrote a small test page that you can load in IE and Firefox or any other Browser.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>Event bubbling test</title>
  </head>
  <body onclick="alert('body');" style="margin:0;border-width:0;padding:0;background-color:#00FF00;">
    <div onclick="alert('div');" style="margin:0;border-width:0;padding:0;background-color:#FF0000;">
      <span onclick="alert('span');" style="margin:0;border-width:0;padding:0;background-color:#0000FF;">
        <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/get/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="159" height="91" id="flashAbout_small" align="absmiddle">
          <param name="movie" value="http://www.adobe.com/swf/software/flash/about/flashAbout_info_small.swf"/>
          <param name="quality" value="high"/>
          <param name="bgcolor" value="#FFFFFF"/>
          <param name="wmode" value="transparent"/>
          <embed src="http://www.adobe.com/swf/software/flash/about/flashAbout_info_small.swf" quality="high" bgcolor="#FFFFFF" width="159" height="91" wmode="transparent" name="flashAbout_small" align="absmiddle" type="application/x-shockwave-flash" pluginspage="http://www.adobe.com/go/getflashplayer"/>
        </object>
      </span>
    </div>
  </body>
</html>

So clicking any colored shape should produce an alert (except for the green one in IE, not sure why but I hope that's off topic and not related to my issue).

Clicking the Flash container in Firefox will work Perfectly fine. You should get alert boxes in this order containing: span, div and body. Flash bubbles the event to the HTML. But this is not happening in IE.

So why is Flash in IE not bubbling events to HTML?

Edit: As mentioned by Andy E this behavior can also bee seen in Google Chrome which to my knowledge is not using ActiveX to embed the flash movie into the page.

© Stack Overflow or respective owner

Related posts about JavaScript

Related posts about html