admin管理员组文章数量:1317369
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ".dtd">
<html xmlns="">
<head>
<title>Event bubbling test</title>
</head>
<body onclick="alert('body');" style="margin:0;border-width:0;padding:0;background-color:#00FF00;">
<div onclick="alert('div');" style="margin:0;border-width:0;padding:0;background-color:#FF0000;">
<span onclick="alert('span');" style="margin:0;border-width:0;padding:0;background-color:#0000FF;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase=".cab#version=7,0,0,0" width="159" height="91" id="flashAbout_small" align="absmiddle">
<param name="movie" value=".swf"/>
<param name="quality" value="high"/>
<param name="bgcolor" value="#FFFFFF"/>
<param name="wmode" value="transparent"/>
<embed src=".swf" quality="high" bgcolor="#FFFFFF" width="159" height="91" wmode="transparent" name="flashAbout_small" align="absmiddle" type="application/x-shockwave-flash" pluginspage=""/>
</object>
</span>
</div>
</body>
</html>
So clicking any colored shape should produce an alert (except for the green one in IE, not sure why but I hope that's off topic and not related to my issue).
Clicking the Flash container in Firefox will work Perfectly fine. You should get alert boxes in this order containing: span, div and body. Flash bubbles the event to the HTML. But this is not happening in IE.
So why is Flash in IE not bubbling events to HTML?
Edit: As mentioned by Andy E this behavior can also bee seen in Google Chrome which to my knowledge is not using ActiveX to embed the flash movie into the page.
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.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<title>Event bubbling test</title>
</head>
<body onclick="alert('body');" style="margin:0;border-width:0;padding:0;background-color:#00FF00;">
<div onclick="alert('div');" style="margin:0;border-width:0;padding:0;background-color:#FF0000;">
<span onclick="alert('span');" style="margin:0;border-width:0;padding:0;background-color:#0000FF;">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia./get/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="159" height="91" id="flashAbout_small" align="absmiddle">
<param name="movie" value="http://www.adobe./swf/software/flash/about/flashAbout_info_small.swf"/>
<param name="quality" value="high"/>
<param name="bgcolor" value="#FFFFFF"/>
<param name="wmode" value="transparent"/>
<embed src="http://www.adobe./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./go/getflashplayer"/>
</object>
</span>
</div>
</body>
</html>
So clicking any colored shape should produce an alert (except for the green one in IE, not sure why but I hope that's off topic and not related to my issue).
Clicking the Flash container in Firefox will work Perfectly fine. You should get alert boxes in this order containing: span, div and body. Flash bubbles the event to the HTML. But this is not happening in IE.
So why is Flash in IE not bubbling events to HTML?
Edit: As mentioned by Andy E this behavior can also bee seen in Google Chrome which to my knowledge is not using ActiveX to embed the flash movie into the page.
Share Improve this question edited Nov 2, 2020 at 12:16 Brian Tompsett - 汤莱恩 5,89372 gold badges61 silver badges133 bronze badges asked Jul 21, 2010 at 16:41 166_MMX166_MMX 6005 silver badges18 bronze badges4 Answers
Reset to default 3Flash 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.
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 acplishes 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);
return false;
}
});
});
Here is an example of a flash movie with a wrapper element to allow this to function properly in chrome
<div class="enableclickthrough">
<script type="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 ponents in them.
I hope this helps other that have this issue with flash movies.
Best regards
Will Ferrer
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.
<span style="display:block;position:absolute;z-Index:2; background:url(/img/x.gif) repeat;width: 159px; height: 91px;"></span>
<object style="position:absolute;z-Index:1" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia./get/shockwave/cabs/flash/swflash.cab#version=7,0,0,0" width="159" height="91" id="flashAbout_small" align="absmiddle">
<param name="movie" value="http://www.adobe./swf/software/flash/about/flashAbout_info_small.swf"/>
<param name="quality" value="high"/>
<param name="bgcolor" value="#FFFFFF"/>
<param name="wmode" value="transparent"/>
<embed src="http://www.adobe./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./go/getflashplayer"/>
</object>
Without the (transparent) background image of the overlay this wouldn't work though.
Just at a callback function to notify flash of certain mouseevent types..
Then you can bubble internally from there.
本文标签： javascriptEvent not bubbling in some Browsers when clicked on FlashStack Overflow
版权声明：本文标题：javascript - Event not bubbling in some Browsers when clicked on Flash - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1742021208a2414707.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论