EXTJS - Modx: on('mouseenter') | event fire | no bubble

Question

I have an element with an on('mouseenter') event handler attached. The problem is the event does not fire on the selected element if the response time that transition to a sub node element of the element that the event is really attached to.

Querying: element.tagName gives the correct value sometimes and wrong other times causing event firing issues.

Solution: the solution was to add an array with valid tag names then query the parent of the element the event fired on until a valid tag name is found.

EXTJS is well annoying.

var elements = Ext.select('tag1, tag2, tag3', true);

elements.on('mouseleave', function(e, el){

var tags = ['TAG1', 'TAG2', 'TAG3']; // valid event Tags in caps;
var els = el;
if(tags.includes(els)){
while(true){
els=Ext.get(els).parent("",true);
if(tags.includes(els.tagName)){break;}
}
}

// now els contains the correct tag

}, this);

// duplicate function and change event for on('mouseleave');

Answer 1

elements.on('mouseleave', function(e, el){

var tags = ['TAG1', 'TAG2', 'TAG3']; // valid event Tags in caps;
var els = el;
if(tags.includes(els)){
while(true){
els=Ext.get(els).parent("",true);
if(tags.includes(els.tagName)){break;}
}
}

// now els contains the correct tag

}, this);

// duplicate function and change event for on('mouseleave');