PDA

View Full Version : Event bubbles



moraes
10 Jan 2007, 12:54 PM
1. I have a div that has a mouseover/mouseout event to display/hide a toolbar on its corner.

2. Once the mouse goes over the toolbar, it is out of the div so I added mouseover/mouseout events to the toolbar to keep it displayed or hide it.

3. Now, the problem is that if I create a new element and add the events to display the toolbar on mouseover, I have to re-add the events to the toolbar to keep it displayed, because the new element hide event is added to the end of the event list. It doesn't seem smart, but I don't know another way. Is there a pattern for this or this is how it should be done?

jack.slocum
10 Jan 2007, 11:52 PM
You lost me on 3. I think what you are trying to do is delegate the events and the child elements are firing mouseout events which are bubbling to your toolbar and causing it to want to hide? If yes, you will want to get the related target (where it's going) and see if it is a child of the toolbar, if it is then ignore the mouseout.

Here's a code snippet from the autoHid of a layout region:


if(this.config.autoHide !== false){
var slideInTask = new YAHOO.ext.util.DelayedTask(this.slideIn, this);
this.slideEl.mon('mouseout', function(e){
var to = e.getRelatedTarget();
if(to && to != this.slideEl.dom && !YAHOO.util.Dom.isAncestor(this.slideEl.dom, to)){
slideInTask.delay(500);
}
}, this, true);
this.slideEl.mon('mouseover', function(e){
slideInTask.cancel();
}, this, true);
}