Event not bubbling in some Browsers when clicked on Flash_问答_开发者

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;back开发者_运维知识库ground-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.

Flash in Internet Explorer is an ActiveX control - ActiveX controls consume events but don't fire them on the object element hosting them. This means there is no DOM event to bubble up. FWIW, Google Chrome behaves the same way.

We wrestled with this problem quite a bit and finally came to simple solution.

When a click happens over an embed you can hide the embed, then re trigger the click event. For chrome this code relies on a wrapper element for the flash movie that captures the click, give this wrapper element the class "enableclickthrough" -- here is some jquery code that accomplishes this:

Edit: updated this for my own needs so the code is more selective about what flash movies can be clicked through -- now its only ones that have a class of enableclickthrough or are the child of an element with that class

// When a mouse up occurs on an embed or a holder element taged with class enableclickthrough, then hide the element and refire the click
$(document).ready(function (){
    $('body').mouseup(function (event) {
        var offset = $(this).offset(),
            clientX = event.clientX,
            clientY = event.clientY,
            left = offset.left,
            top = offset.top,
            x = clientX - left,
            y = clientY - top,
            target = $(event.target),
            display = $(target).css('display'),
            passClickTo;

        if (typeof clientX != 'undefined' && (target.parent().hasClass('enableclickthrough') || target.hasClass('enableclickthrough'))) {
            target.css('display', 'none');
            // If you don't pull it out of the array for some reason it doesn't work in all instances
            passClickTo = $(document.elementFromPoint(x, y));
            passClickTo[0].click(); 
            target.css('display', display);
            return false;
        }
    });
});

Here is an example of a flash movie with a wrapper element to allow this to function properly in chrome

<div class="enableclickthrough">
    <script type="text/javascript">
    AC_FL_RunContent([params_for_your_flashmovie_here]);
    </script>
</div>

Keep in mind this solution is for flash movies that do not have interactive components in them.

I hope this helps other that have this issue with flash movies.

Best regards

Will Ferrer

My solution to this problem was to position the flash object absolute and place a equally sized span element over it which catches the mouse click.

<span style="display:block;position:absolute;z-Index:2; background:url(/img/x.gif) repeat;width: 159px; height: 91px;"></span>
<object style="position:absolute;z-Index:1" 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>

Without the (transparent) background image of the overlay this wouldn't work though.

Just at a callback function to notify flash of certain mouseevent types..
Then you can bubble internally from there.