问题
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>
回答1:
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.
回答2:
I found this at http://progproblems.blogspot.com/2009/08/javascript-onclick-for-flash-embeded.html
- Set the param
wmode
totransparent
. This allows the object containing the flash to receive the javascriptonclick
. - Use
onmousedown
insted ofonclick
. In spite of usingwmode
transparent
, some browsers still wont call theonclick
, but they do callonmousedown
.
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 =)
回答3:
The flash almost certainly doesn't propagate the click event to its parent. Nothing you can do unless you wrote the flash, I suppose.
回答4:
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?
回答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');"> </div>
</div>
回答6:
do onclick event on a the object tag. (obejct tag supports mouse events). then grab the parent div via DOM.
回答7:
<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!!!
回答8:
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>
来源:https://stackoverflow.com/questions/1444562/javascript-onclick-event-over-flash-object