This is a bit of wild guessing, so read with a grain of salt (50% chance this will help).
1. If this is a Flex 4 application, try changing the addChild() to addElement(). Reason: addChild doesn't seem to work for me.
2. Sounds like your event is "bubbling" up from the target "up" to the parent component. Might try:
Good luck - sorry for the lack of certainty.
Unfortunately using :
object.stopPropogation() or object.stopImmediatePropagation() didn't work.
I added Alert.show(object.currentTarget.valueOf()) in click event function. The value it alerts is same whether clicked on rectangle or outside rectangle.
At first glance... Your rectangle has no fill, so the only part that would be clickable would be the stroke. Try adding a fill with its "alpha" property set to 0. Also, you can use the event from the clickHandler to determine where the event is originating from (event.target).
I used the event.target and got to know, textField was generating event(Phase 3), so resized the text field to fit the rectangle and now all is fine.
But I have question, textField is added as child to UIComponent and event listener is not added to textField but for the UIComponent. Why is textField dispatching click event?
The TextField is still catching the "click" events because it is essentially sitting on top of your UIComponent. Instead of resizing the TextField, I would suggest adding a call to graphics.beginFill(0xFFFFFF, 0) before you draw your rectangle and a call to graphics.endFill() right after you finish drawing your rectangle. This should make your entire UIComponent clickable based on the size of your rectangle, not the size of the TextField. Set mouseEnabled = false on the TextField and you should be good.