Blur event firing when it should not

Situation:

-Google Closure Component that contains a seamless field, and a clickable text at its side
-The object should load focused at the seamless field to let the user write on it immmediately, or click at the text
-I wanted to have the object disposed if it loses focus (blur)
-I wante to have the object transformed if the user clicks on the text


This created an issue because the listener to the blur event was listening at the seamless field, and if I clicked the text the object dissapeared with no option to get it changed.

I researched for options like:
-hierarchical propagation of events
-timers
-priority of event dispatching


Nothing of the previous served, the solution was to set two additional listeners in the clickable text, a mouseout and a mouseover. each switch the value of a flag. then when the dispose event gets fired, before executing it, I just needed to check the status of the flag to know if I can dispose the object, or not.

The variable at the declaration space:

 this.outsideClick = true;  

The listeners:

 this.ehChoicer_.listen(goog.dom.getElement(this.makeId(this.rootlabel+'eventChoice')), goog.events.EventType.MOUSEOUT , switchClickComponentOut);  

 this.ehChoicer_.listen(goog.dom.getElement(this.makeId(this.rootlabel+'eventChoice')), goog.events.EventType.MOUSEOVER , switchClickComponentIn);  

The functions:

 function switchClickComponentOut(){  

           this.outsideClick=true;  

 }  

 function switchClickComponentIn(){  

           this.outsideClick=false;  

 }  

The check at the dispose:

 if (this.outsideClick)   

 {  

 //the dispose stuff  

 }