javascript onclick event over flash object

Question

I have one embed flash movie inside one div, I put one javascript onclick event handler in the main div, but isn't catching the click, what is wrong?

Code:

   <div id="top-box-player" onclick="alert('Hi Bananas!');">
     <object width="400" height="300">
        <param name="movie" value="general.swf">
        <embed src="./swf/general.swf" width="400" height="300">
        </embed>
     </object>
   </div>

Answer 1

The flash almost certainly doesn't propagate the click event to its parent. Nothing you can do unless you wrote the flash, I suppose.

Answer 2

It is best to think of all swf's as having a z-order of infinity. Flash is on top and there is very little which can be done to stop that. On the other hand, if you have access to the code of the SWF itself, or if you can use another swf to load your current swf, you'll be able to use a couple of different Flash commands to address the JavaScript of the page. (ExternalInterface is your best bet).

//This is what your AS code should look like:
import flash.external.ExternalInterface;
import flash.events.MouseEvent;

root.addEventListener( MouseEvent.CLICK, useExternal, true );

function useExternal( event:MouseEvent):void
{
    //swfClickFunction is defined in JavaScript
    ExternalInterface.call( "swfClickFunction" );
}

Another alternative solution using onmousedown instead of onclick is provided by Darwin below.

Answer 3

the flash object will always catch the click and not automatically pass it along. you will have to build that functionality - catch onclick in flash and call JS-function.

what are you trying to accomplish?

Answer 4

I found this at http://progproblems.blogspot.com/2009/08/javascript-onclick-for-flash-embeded.html

1. Set the param wmode to transparent. This allows the object containing the flash to receive the javascript onclick.
2. Use onmousedown insted of onclick. In spite of using wmode transparent, some browsers still wont call the onclick, but they do call onmousedown.

The code looks like this:

<div onmousedown="clickBanner(1)">
<object>
<param name="movie" value="3.swf">
<param name="wmode" value="transparent" />
<embed wmode=transparent allowfullscreen="true" allowscriptaccess="always" src="3.swf"></embed>
</object>
</div>

It work for my needs =)

Answer 5

Try this easy solution cover the flash with div and put the click event on top div so flash will never grab the mouse.

<div style="position:absolute;top:209px;left:80px;z-index:500;" id="helpvideos"> 
<div style="float:left">
<fb:swf 
    swfbgcolor="FFFFFF"  
    swfsrc='<?php echo SITE_URL;?>swf/3_sidebar.swf'  
    width='600' height='670'
    wmode="transparent"
     />
</div>
<div style="width:600px;height:670px;position:absolute;float:left;z-index:6000;" onclick="document.getElementById('helpvideos').setStyle('display','none');">&nbsp;</div>
</div>

Answer 6

do onclick event on a the object tag. (obejct tag supports mouse events). then grab the parent div via DOM.