Stop event firing on child elements using EXT's mouseenter

Question

The Problem: I have an anchor tag with a class name 'hasChildren' which in turn has a span element containing the text. When using EXT's .on('mouseenter',function()) on the anchor tag, it fires the event on both the span and/or the anchor tag.

expected result: hovering over either the span or the anchor tag, the class should be added to the anchor tag alone

current result: hovering over either the span or the anchor tag, the class is added to the element which receives focus first.

As in the JS you'll see I tried the hover function but gives the same results.

The HTML:

<a class="hasChildren" href="#"><span>web 2.0</span></a>

The CSS:

.hasChildren {
  display:block;
  width:100px;
  background-color:#333;
}
.hasChildren span {
  background-color:#EEE;
  display:block;
  line-height:40px;
  margin-left:10px;
  padding:0 20px 10px 10px;
}

The JavaScript:

function over(e,t){
    Ext.get(t).addClass('red');
}
function out(e,t){
    Ext.get(t).removeClass('red');
}
Ext.onReady(function() {
    //Ext.select('.hasChildren').hover(over,out,this);
    Ext.select('.hasChildren').on('mouseenter',over);
    Ext.select('.hasChildren').on('mouseleave',out);
});

FYI: I'm using ext-core-3.1.0 and I can get this working by using jQuery but as the lead developer requested that I only use extJS, I'd like to get this working without adding another javascript library.

Answer 1

Try and surround your anchor tag in a div and then attach the listeners on the div. I think you want to try and attach the events to the outermost container in this case.

Answer 2

I eventually found what I was looking for. The javascript functions should change to look like this:

function over(e,t){
    Ext.get(e.getTarget('a')).addClass('red');
}
function out(e,t){
    Ext.get(e.getTarget('a')).removeClass('red');
}

The explanation: Previously I tried to add the class to 't' as in get(t), which rightfully could be either the parent or child element. But by using (e.getTarget('a')) I tell it to select the anchor tag and apply the class to that element alone.

This method gives one control over propagation, funny thing is the following could also work for the 'out' function and it would do exactly the same (in theory):

function out(e,t){
    Ext.get(e.getTarget('span')).parent().removeClass('red');
}

Another thing I discovered: The Ext.onReady functions can also be written as:

Ext.select('.hasChildren').on( { mouseenter: { fn: over } } );

This way makes it easier to add more events to the target element(s)

Ext.select('.hasChildren').on( { mouseenter: { fn: over } },  { mouseleave: { fn: out } });

Answer 3

Use this function of Ext.Element : addClassOnOver(). So, for your case, it will be:

Ext.onReady(function() {    
    Ext.select('.hasChildren').addClassOnOver('red');
});

It will automatically toggle the CSS class.