当设置不透明度时，Flash在HTML元素下接收鼠标事件 [英] Flash receives mouse events under an HTML element when opacity set

问题描述

我有一个带有Flash对象的HTML文档和一个绝对定位的HTML元素。如果将HTML元素的 opacity CSS属性设置为小于1的任何值，则Flash对象（实际上是覆盖的）将接收鼠标事件。纯HTML元素无法复制此问题。此外，Flash只接收 hover 事件，所以我不能点击下面的图层。

我把一个在线展示问题。

我在Firefox 3.6中得到这个行为， Mac和Windows中的Safari 4.0和Chrome 5.0。 Flash插件版本10被安装。

它是一个错误还是正常的和期望的行为？如果是后者，那么如何防止Flash接收事件的时候被半透明的层覆盖？ 解决方案

非常有趣的问题，我搜索了很多，只发现了ActionScript的解决方案。我甚至在本地复制了这个页面，并试图在闪光灯和面板之间放置一块砖墙，但闪光灯总是会响应鼠标事件。不幸的是，我唯一的解决办法是移动/替换闪光灯的图像一旦面板出现，我希望你需要一个覆盖整个地图的面板。如果你只是有一些导航，滑过一些闪光灯，然后用一个图像替换它可能是回避。

$ b $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ p> < script src =http://code.jquery.com/jquery-latest.js>< / script>
< script type =text / javascript>
$（document）.ready（function（）{
$（。panel）。mouseover（function（）{
$（＃google-visualization-geomap-0） .css（{'position'：'absolute'，'left'：'-999em'}）;
}）;
$（。panel）。 $ b $（＃google-visualization-geomap-0）。css（{'position'：'static'，'left'：'0'}）;
}）;
}） ;
< / script>


希望这有一点帮助。

I have an HTML document with a Flash object and an absolutely positioned HTML element above it. If I set the HTML element's opacity CSS property to any value less than 1, the Flash object (that is actually covered) receives mouse events. This problem cannot be reproduced with pure HTML elements. Furthermore, Flash only receives hover events, so I cannot click below the layer.

I put a demonstration of the problem online.

I get this behavior in Firefox 3.6, Safari 4.0 and Chrome 5.0 in both Mac and Windows. Flash plugin version 10 is installed.

Is it a bug or the the normal and expected behavior? If the latter, then how can I prevent Flash receiving events when it is covered with a translucent layer?

解决方案

Very interesting issue, i searched far and wide and only found Actionscript solutions to this. I even reproduced this page locally and tried putting everything but a brick wall in-between the flash and the panel, but the flash would always respond to mouse event. Unfortunately the only solution I have is to move/replace the flash with an image once the panel appears over it, and I'm hoping that your needing a panel that covers the entire map. If you just have a bit of navigation that slides over some of the flash then replacing it with an image could prove to be evasive. Here is the code for that using jquery which is the best that I could think of, although you get a bit of a blink when you come out of the panel.

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $(".panel").mouseover(function() {
        $("#google-visualization-geomap-0").css({'position' : 'absolute', 'left' : '-999em'});
    });
    $(".panel").mouseout(function() {
        $("#google-visualization-geomap-0").css({'position' : 'static', 'left' : '0'});
    });
});
</script>

Hope this helps a bit.

这篇关于当设置不透明度时，Flash在HTML元素下接收鼠标事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！