Flash receives mouse events under an HTML element when opacity set

Question

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?

Answer 1

From what I can see from your demo, the Flash object is only retaining the hover event as the mouse passes into the left panel - once over the left panel, the flash object is no longer receiving the hover event otherwise the "Brazil" pop-up, for example, would continue to follow the mouse. The behaviour would seem to be because the mouse has not properly "left" the flash object. If you don't mind me asking, why do you have the map partially obscured by the left panel?

Answer 2

Listen for Event.MOUSE_LEAVE on the stage. This will get fired whenever the mouse leaves the stage (hovering over another html element should trigger this). You can then remove the hover state from anything that shouldn't have it.

Answer 3

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"&gt;&lt;/script&gt;
<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.

Answer 4

gravityone,

I'm having the same issue with a drop down menu overlapping a flash piece I programmed. It sounds like you found some ActionScript solutions? Any input would be appreciated.

I tested the Event.MOUSE_LEAVE listener and unfortunately it it does not distinguish between the mouse being directly over the swf vs being over the menu when it is over the swf.

Thanks!

---

Update:

So I solved this problem by forcing my Flash piece to check a javscript variable before it's roll over effects were executed.

To learn more about swf/js communication look here: link text

or to see how I applied it, look below:

Actionscript:

import flash.external.ExternalInterface;
private var navOver:Boolean;
private function onPackOver(event:MouseEvent){
    //Establish if Nav is on by grabbing js variable.
    navOver = ExternalInterface.call("navOnStatus");
    if (!navOver){
    // mouse over effects
    }
}

Javascript:

//navOn Variable is changed to true when mouse if over the nav, and false when it is not;
var navOn = false;
function navOnStatus(){
return navOn;
}

Answer 5

Maybe it should be considered a browser bug.

As for Google Chrome 5.0.375.99 and Apple Safari 5.0 (6533.16) with Flash Player 10.1 r53 I do not face this problem any more. I get the expected behavior, i.e. Flash object behind the translucent layer does not respond to mouse events.