事件不冒泡

环境： Windows 7中， Internet Explorer 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所说，这种行为也可以在谷歌浏览器中看到，据我所知，它并未使用ActiveX将Flash电影嵌入到页面中。

来源

2010-07-21 166_MMX

Internet Explorer中的Flash是一个ActiveX控件 - ActiveX控件消耗事件，但不会在托管它们的对象元素上触发它们。这意味着没有DOM事件会冒泡。 FWIW，谷歌浏览器的行为方式相同。

来源

2010-07-21 16:44:23

感谢您指出的是，插件在谷歌浏览器行为相同的方式。 – 2010-07-23 09:07:35

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

来源

2011-01-06 20:53:15 Daver

该解决方案需要是纯粹的HTML JavaScript解决方案，因为您并不总是控制嵌入的Flash或Object。 – 2011-01-07 10:01:23

我对这个问题的解决方案是将flash对象放在绝对位置，并在其上放置一个尺寸相同的跨度元素，以捕捉鼠标单击。

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

没有叠加层的（透明）背景图片，这虽然不起作用。

来源

2012-03-08 08:50:46

我们对这个问题摔了一跤，终于找到了简单的解决方案。

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

编辑：更新此为我自己的需要因此代码更好地选择可以点击什么闪光的电影通过 - 现在有一个类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; 
     } 
    }); 
});

这里的唯一的一个闪光的例子电影与包装元素，以使其在铬中正常运作

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

请记住，此解决方案适用于没有交互式组件的Flash动画。

我希望这可以帮助其他与Flash影片有这个问题。

问候

威尔·费雷尔

来源

2012-11-21 04:09:10

回答

相关问题