35

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>
Pedro
  • 2,907
  • 6
  • 34
  • 46

8 Answers8

86

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 =)

cwallenpoole
  • 79,954
  • 26
  • 128
  • 166
Darwin
  • 929
  • 1
  • 7
  • 3
  • http://stackoverflow.com/questions/6273966/detect-flash-object-click-in-javascript/6276394#6276394 – Ryan Lester Jun 08 '11 at 09:18
  • 1
    Thanks! As a follow up, one difference in using mousedown is that it will be triggered by a right-click and a left-click, making right-clicks pop up the flash context menu, and also whatever your click listener will do. So this answer may help those looking to block right clicks. http://stackoverflow.com/questions/9521519/how-can-i-detect-a-rightmouse-button-event-on-mousedown – heff Jul 31 '13 at 22:55
  • this bad since the flash is loosing background – baaroz Feb 20 '14 at 14:57
22

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.

Tim
  • 7,660
  • 3
  • 30
  • 33
cwallenpoole
  • 79,954
  • 26
  • 128
  • 166
  • I try in flash with on(release) { getURL("javascript:highlightform()"); } and work fine!!! But your solution is valid too, so thanks! – Pedro Sep 18 '09 at 14:09
2

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

Tor Haugen
  • 19,509
  • 9
  • 45
  • 63
2

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?

oberhamsi
  • 1,303
  • 8
  • 18
2

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>
Tahir
  • 21
  • 1
1

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

Elijan
  • 1,406
  • 1
  • 8
  • 11
1
<param name="wmode" value="transparent" />

This was the solution for me. Well, I implemented it over the AC_RunActiveContent.js at the params:

'wmode', 'transparent',

Nice!!!

Yagarasu
  • 11
  • 1
1

I had that problem when I tried to make automated dynamic-placed banners. If SWF were setted to 'opaquecolor' mode, then I had no clicks acceptables - and i had to use opaquecolor because some banners were messed up with the websites colors. The solution I found, is to set the SWF to 'transparent' mode, at a <div> of z-index:10, and place beneath it a new <div> of same dimensions of the SWF file, filled with the opaquecolor of the SWF. Both divs into an <a> tag. That worked.

Example:
    <a href="www.mysite.com">
    <div id="SWF_file_container" style="width:100px; height:40px; z-index:10;">
    <object> .... </object> (adding SWF in TRANSPARENT MODE)
    </div>
    <div id="opaquecolor_of_swf" style="width:100px; height:40px; z-index:2; background-color:#ff0000;"></div>
    </a>
vkp
  • 11
  • 1