mouseEnabledWhereTransparent not working as expected

I just cannot understand why mouseEnabledWhereTransparent does not work on this skin.

The Skin this creates is basically a Button with a transparent background and a little triangle to the left side, like so: >ButtonText But the empty space around the Triangle does not receive mouse events.

I've tried wrapping another group around the triangle path and i've tried wrapping it into a Graphic Object, also without success. I could create a Rect with 0 alpha below every开发者_如何转开发thing, but isn't that exactly what mouseEnabledWhereTransparent should be doing for me?

<?xml version="1.0" encoding="utf-8"?>
<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
             xmlns:fb="http://ns.adobe.com/flashbuilder/2009" minWidth="21" minHeight="21" alpha.disabled="0.5"
             mouseEnabledWhereTransparent="true">

    <!-- host component -->
    <fx:Metadata>
        <![CDATA[ 
        [HostComponent("spark.components.Button")]
        ]]>
    </fx:Metadata>

    <!-- states -->
    <s:states>
        <s:State name="up" />
        <s:State name="over" />
        <s:State name="down" />
        <s:State name="disabled" />
    </s:states>

    <!-- triangle tip -->
    <s:Path data="M 0 0 L 0 14 L 10 7 L 0 0" bottom="5">
        <s:fill>
            <s:SolidColor color="0xFFFFFF" />
        </s:fill>
    </s:Path>


    <!-- text -->
    <s:Label id="labelDisplay"
                 textAlign="center"
                 verticalAlign="bottom"
                 maxDisplayedLines="1" 
                 left="14" right="10" top="2" bottom="2" color="0x000000" fontSize="14">
    </s:Label>
</s:SparkSkin>

---

Yo, what you need is to add a rectangle before that path to act as a hit area, this works:

<s:Rect left="0" right="0" top="0" bottom="0" >
    <s:fill>
        <s:SolidColor alpha="0" />
    </s:fill>
</s:Rect>

This guy here has a good example of making custom buttons (minus the label)

---

mouseEnabledWhereTransparent has no effect if there are no mouse event listeners on the Group it is set on. In your example the Button object has a click event listener, but the Button's skin object (SparkSkin) does not.

From the ASDoc for GroupBase.mouseEnabledWhereTransparent:

"This property only goes in to effect if mouse, touch, or flash player gesture events are added to this instance."

A workaround for you would be to add a mouse event listener to the skin that won't do anything, for example:

<s:SparkSkin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" 
             mouseEnabledWhereTransparent="true" click="doNothing()">
    <fx:Script>
        <![CDATA[
            protected function doNothing():void {
                trace('doNothing');
            }
        ]]>
    </fx:Script>
    ...
</s:SparkSkin>

The main use case for this property has been adding click events directly to a Group, but it is interesting to think about the case you bring up. It might be reasonable to file an enhancement request along the lines of "Setting mouseEnabledWhereTransparent on a skin should have an effect if the hostComponent has mouse listeners attached".