More on State behaviors

Question

With the following code I overwrite the click behavior and
pass control to a child container, at least in theory. Problem is,
it does not work:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="
http://www.adobe.com/2006/mxml"
layout="absolute" width="100%" height="100%"
backgroundColor="#FFFFFF">
<mx:states>
<mx:State name="open1">
<mx:SetProperty target="{cat1}" name="width"
value="390"/>
<mx:SetProperty target="{cat1}" name="height"
value="390"/>
<mx:SetStyle target="{cat1}" name="left" value="0"/>
<mx:SetStyle target="{cat1}" name="top" value="0"/>
<mx:SetEventHandler target="{cat1}" name="click"/>
<mx:SetProperty target="{cat1}" name="useHandCursor"
value="false"/>
<mx:SetProperty target="{cat1}" name="mouseEnabled"
value="false"/>
<mx:SetProperty target="{cat1}" name="buttonMode"
value="false"/>
<mx:AddChild relativeTo="{cat1}" position="lastChild">
<mx:Canvas x="95" y="100" width="200" height="200"
click="{currentState='';}" backgroundColor="#ffffff"
buttonMode="true" mouseEnabled="true" useHandCursor="true">
</mx:Canvas>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Canvas id="mystage" width="390" height="390"
horizontalCenter="0" resizeEffect="Resize">
<mx:Canvas id="cat1" left="60" top="60" width="150"
height="150" backgroundColor="#999999"
click="{currentState='open1';}" useHandCursor="true"
buttonMode="true" mouseEnabled="true" mouseChildren="true"/>
</mx:Canvas >
</mx:Application>

Answer 1

You don't need to override click behavior in this case.
The problem is, you are adding the child container to the
main container and both define click event. By default, event
propagates so when you click the child container, click event of
parent container also fires and it reverts back the currentState.
To fix this, you need to tell the child container to not
propagate the event by setting event.stopPropagation() to false. So
your code would look like:
<mx:AddChild relativeTo="{cat1}" position="lastChild">
<mx:Canvas x="95" y="100" width="200" height="200"
click="currentState='';event.stopPropagation()"
backgroundColor="#ffffff" buttonMode="true" mouseEnabled="true"
useHandCursor="true">
</mx:Canvas>
</mx:AddChild>
BTW, you don't have to define event handlers in curly braces.
Thanks,
-Ashish