Track a click on a flash movie (object / embed) with jQuery

Question

I am making a dynamic banner system which can handle img banners, as well as flash banners done with object/embed. The entire site makes heavy use of jQuery, including handling the 'click' events.

This obviously isn't a problem when it comes to tracking the clicks on the image itself (i track the click on the parent DIV tag. However, it fails when the advert is an SWF, as I suspected it would.

Is there a jQuery workaround that would allow me to capture a click on a Flash element with the DOM?

Answer 1

I know this was posted a long time ago and already answered but I just wanted to add a much easier solution for future site visitors. While the embedded SWF file will swallow the onclick event it does not swallow the onmousedown event. The trick is having the wmode set to transparent in the param tags as well as in the embed tag.

<div id="layer1" onmousedown="alert('mouse down')"> 
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://fpdownload.adobe.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" 
width="799" height="741" id="myMovieName">
<param name="movie" value="_data.swf" /> 
<param name="quality" value="high" />
<param name="play" value="true" />
<param name="loop" value="true" />
<param name="wmode" value="transparent" />
<embed src="_data.swf" quality=high bgcolor=#FFFFFF width="799" height="741" 
name="myMovieName" type="application/x-shockwave-flash" 
play="true" loop="true" wmode="transparent"
pluginspage="http://www.adobe.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash">
</embed>
</object>
</div>

You can use jQuery to bind to the mousedown event instead like so:

$('#layer1').mousedown(function() {
  alert('mouse down');
});

Answer 2

If you have access to the source of SWF, you can use ExternalInterface to communicate with the containing html page.

//inside the flash movie:
stage.addEventListener(MouseEvent.CLICK, onClick);
function onClick(e:MouseEvent):void
{
   ExternalInterface.call("handleFlashClick", [parameters to the method]);
}

//javascript in the containing html page
function handleFlashClick()
{
  //call the jQuery method here.
}