单击 Flash 时事件不会在某些浏览器中冒泡 [英] Event not bubbling in some Browsers when clicked on Flash

查看：24
本文介绍了单击 Flash 时事件不会在某些浏览器中冒泡的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

环境:Windows 7的，互联网浏览器 8，Flash ActiveX 10.1.53.64，wmode=透明

刚刚编写了一个可以在 IE 和 Firefox 或任何其他浏览器中加载的小型测试页面.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><头><title>事件冒泡测试</title><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.com/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.com/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.com/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.com/go/getflashplayer"/></对象></span>

所以点击任何颜色的形状应该会产生一个警报(IE 中的绿色除外，不知道为什么，但我希望这不是主题，与我的问题无关).

在 Firefox 中单击 Flash 容器将完全正常.您应该按此顺序获得警告框，其中包含:span、div 和 body.Flash 将事件冒泡到 HTML.但这不会发生在 IE 中.

那么为什么 IE 中的 Flash 没有将事件冒泡到 HTML?

正如 Andy E 提到的，这种行为也可以在 Google Chrome 中看到，据我所知，它没有使用 ActiveX 将 Flash 电影嵌入到页面中.

解决方案

这个问题我们纠结了好久，终于找到了一个简单的解决方案.

当点击发生在嵌入上时，您可以隐藏嵌入，然后重新触发点击事件.对于 chrome，此代码依赖于捕获点击的 Flash 电影的包装元素，为此包装元素提供类enableclickthrough"——这是一些实现此目的的 jquery 代码:

根据我自己的需要更新了这个，所以代码对可以点击的 Flash 电影更具选择性——现在它只有那些具有 enableclickthrough 类或具有该类的元素的子元素

//当鼠标出现在标记有类 enableclickthrough 的嵌入或 holder 元素上时，然后隐藏该元素并重新触发点击$(document).ready(function (){$('body').mouseup(函数(事件){var offset = $(this).offset(),clientX = event.clientX,clientY = event.clientY,左 = offset.left,顶部 = 偏移量.顶部，x = 客户X - 左，y = 客户Y - 顶部，目标 = $(event.target),display = $(target).css('display'),通过点击到；if (typeof clientX != 'undefined' && (target.parent().hasClass('enableclickthrough') || target.hasClass('enableclickthrough'))) {target.css('显示', '无');//如果由于某种原因你没有把它从数组中拉出来，它在所有情况下都不起作用passClickTo = $(document.elementFromPoint(x, y));passClickTo[0].click();target.css('显示', 显示);返回假；}});});

这是一个带有包装元素的 Flash 电影示例，以使其在 chrome 中正常运行

<script type="text/javascript">AC_FL_RunContent([params_for_your_flashmovie_here]);

请记住，此解决方案适用于没有交互式组件的 Flash 电影.

我希望这可以帮助其他在 Flash 电影方面遇到此问题的人.

最好的问候

威尔·费雷尔

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.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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.com/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.com/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.com/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.com/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.

解决方案

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 accomplishes 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 components in them.

I hope this helps other that have this issue with flash movies.

Best regards

Will Ferrer

这篇关于单击 Flash 时事件不会在某些浏览器中冒泡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆