Was working on my top-secret Flex-based project over the weekend when I discovered something I hadn’t come across before.

The issue is that when you have a Spark Rect GraphicsElement within a Spark Group it seems that the rollover event of the group is triggered even though the mouse doesn’t roll over the Rect.

Here is a video I made to explain my issue on Twitter:

The code in the video is as follows:

[codesyntax lang=”mxml”]

<s:WindowedApplication xmlns:fx=”https://ns.adobe.com/mxml/2009
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”>

&lt;s:Group rollOver="trace('ya')"&gt;
    &lt;s:Rect x="100" y="100" width="20" height="20"&gt;
        &lt;s:fill&gt;
            &lt;s:SolidColor color="0x00ff00" /&gt;
        &lt;/s:fill&gt;
    &lt;/s:Rect&gt;
&lt;/s:Group&gt; 

</s:WindowedApplication>
[/codesyntax]

It turns out (after posting the issue on the Adobe Forums) that I was simply missing the “mouseEnabledWhereTransparent” property on the Group. Setting it to false causes the mouse to perform a hit-test rather than a simple bounds check. Thank you Mr Shongrunden for pointing this out to me :)

So this now works:

[codesyntax lang=”php”]

<s:WindowedApplication xmlns:fx=”https://ns.adobe.com/mxml/2009
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”>

&lt;s:Group rollOver="trace('ya')" mouseEnabledWhereTransparent="false"&gt;
    &lt;s:Rect x="100" y="100" width="20" height="20"&gt;
        &lt;s:fill&gt;
            &lt;s:SolidColor color="0x00ff00" /&gt;
        &lt;/s:fill&gt;
    &lt;/s:Rect&gt;
&lt;/s:Group&gt; 

</s:WindowedApplication>
[/codesyntax]

I hope this helps someone else out!