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. <

Solution 1:

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.

Solution 2:

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);
            returnfalse;
        }
    });
});

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

<divclass="enableclickthrough"><scripttype="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

Solution 3:

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.

<spanstyle="display:block;position:absolute;z-Index:2; background:url(/img/x.gif) repeat;width: 159px; height: 91px;"></span><objectstyle="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"><paramname="movie"value="http://www.adobe.com/swf/software/flash/about/flashAbout_info_small.swf"/><paramname="quality"value="high"/><paramname="bgcolor"value="#FFFFFF"/><paramname="wmode"value="transparent"/><embedsrc="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.

Solution 4:

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