单击 Flash 时，某些浏览器中的事件不会冒泡答案

【问题标题】：Event not bubbling in some Browsers when clicked on Flash单击 Flash 时，某些浏览器中的事件不会冒泡
【发布时间】：2020-11-02 20:16:16
【问题描述】：

环境： Windows 7的，互联网浏览器 8，闪存 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 所提到的，这种行为也可以在 Google Chrome 中看到，据我所知，它没有使用 ActiveX 将 Flash 电影嵌入到页面中。

【问题讨论】：

标签： javascript html flash events dom-events

【解决方案1】：

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

【讨论】：

感谢您指出 Google Chrome 中的插件的行为方式相同。

【解决方案2】：

我们为这个问题苦苦挣扎，终于找到了简单的解决方案。

当点击嵌入时，您可以隐藏嵌入，然后重新触发点击事件。对于 chrome，此代码依赖于用于捕获点击的 Flash 电影的包装器元素，为此包装器元素赋予“enableclickthrough”类 - 这是一些完成此操作的 jquery 代码：

编辑：根据我自己的需要对此进行了更新，因此代码对可以点击哪些 Flash 电影更有选择性——现在它只有一个具有 enableclickthrough 类或者是具有该类的元素的子元素的代码

// 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 电影。

我希望这可以帮助其他遇到 Flash 电影问题的人。

最好的问候

费雷尔

【讨论】：

【解决方案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>

如果没有叠加层的（透明）背景图像，这将无法正常工作。

【讨论】：

【解决方案4】：

只是在一个回调函数中通知 Flash 某些鼠标事件类型..
然后你可以从那里开始在内部冒泡。

【讨论】：

解决方案必须是纯 HTML JavaScript 解决方案，因为您并不总是能够控制嵌入的 Flash 或对象。