Question

环境： Windows 7的， Internet Explorer 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">
  <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>

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

在Firefox中单击Flash容器将非常好用。您应该按此顺序获取警报框，其中包含：span，div和body。 Flash将事件冒泡到HTML。但这不会发生在IE中。

那么为什么IE中的Flash不会将事件冒泡到HTML？

编辑：正如Andy E所提到的，这种行为也可以在谷歌浏览器中看到，据我所知，我没有使用ActiveX将Flash电影嵌入到页面中。

Answer 1

Internet Explorer中的Flash是一个ActiveX控件 - ActiveX控件使用事件但不会在托管它们的对象元素上触发它们。这意味着没有任何DOM事件冒出来。 FWIW，Google Chrome的行为方式相同。

Answer 2

我们对这个问题进行了相当多的努力，终于找到了简单的解决方案。

当嵌入点击发生时，您可以隐藏嵌入，然后重新触发点击事件。对于chrome，这段代码依赖于捕获点击的flash影片的包装元素，给这个包装元素提供“enableclickthrough”类 - 这里有一些jquery代码可以实现这个：

编辑：根据自己的需要对此进行了更新，以便代码对可以点击的Flash电影更具选择性 - 现在它只有一类具有启用顺序或者是具有该类的元素的子元素

// 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;
        }
    });
});

以下是带有包装元素的Flash影片示例，以便在Chrome中正常运行

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

请注意，此解决方案适用于没有交互式组件的Flash电影。

我希望这有助于其他有闪光电影问题的人。

祝你好运

Will Ferrer

Answer 3

我解决这个问题的方法是将flash对象置于绝对位置，并在其上放置一个相同大小的span元素，以捕获鼠标。

<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.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>

如果没有叠加层的（透明）背景图像，这将无效。

Answer 4

只是在回调函数中通知flash某些mouseevent类型..
然后你可以从那里内部起泡。

单击Flash时，某些浏览器中没有冒泡的事件

4 个答案: