Prevent events from children elements [Archive]

tal_gi

3 May 2007, 7:21 PM

Hello,

Quite new to Ext so this may be obvious but couldn't find answer in the forum.

I have a list of items (divs) that are contained in a container. I want to highlight an item once the mouse is over it (mouseover event) and remove the highlight when the mouse
is out (mouseout event). This all works fine using Ext.Element.on(...). The problem is that using this method the event is called also from child elements so if a div contains child divs once the mouse is over a child div we get mouseout event from the parent div which removes the highlight (which is wrong). Is there a way to prevent this behavior ?

Here is the full code, once mousing over the second element (id = 1) this behavior is observed.:-/
<html>
<head>
<link rel="stylesheet" type="text/css" href="js/ext-1.0/resources/css/ext-all.css"/>
<style type="text/css">
.gmt-vis {
margin: 5px 0px 0px 5px; /*top right bottom left*/
padding: 2px;
}
.gmt-child {
margin: 0px 0px 0px 0px; /*top right bottom left*/
padding: 2px;
}
.gmt-back {
background-color:#CCC;
}
.gmt-container {
height:500px;
width: 550px;
overflow-y:auto;
border:1px solid black;
margin:10px;
}
</style>
<script type="text/javascript" src="js/ext-1.0/adapter/yui/yui-utilities.js"></script>
<script type="text/javascript" src="js/ext-1.0/adapter/yui/ext-yui-adapter.js"></script>
<script type="text/javascript" src="js/ext-1.0/ext-all-debug.js"></script>

<script type="text/javascript">
Ext.namespace("gov.gmt");
gov.gmt.VisabilityTest = {
init : function() {
var content = [ "First", "Hidden", "Second" ];
var html = '<div id="{id}" class="{cls}">{body}</div>';
var tpl = new Ext.DomHelper.Template(html);
var containerEl = Ext.get('container');
tpl.compile();
for (var i=0; i<content.length;i++) {
tpl.append(containerEl,{
id: i,
cls: 'gmt-vis',
body: content[i]

});
var elT = Ext.get(i.toString());
if (i === 1) {
tpl.append(elT,{
id: content.length,
cls: 'gmt-child',
body: 'child'
});
}
elT.on("mouseover",this.onMouseOver,this,{stopEvent: true});
elT.on("mouseout",this.onMouseOut,this,{stopEvent: true});
}
},

onMouseOver : function (event,target) {
var el= Ext.get(target.id.toString());
el.addClass('gmt-back');
},
onMouseOut : function (event,target) {
var el= Ext.get(target.id.toString());
el.removeClass('gmt-back');
}

};

Ext.EventManager.onDocumentReady(gov.gmt.VisabilityTest.init, gov.gmt.VisabilityTest, true);
</script>
</head>
<body>
<div id="container" class="gmt-container"></div>
</body>
</html>

jsakalos

4 May 2007, 6:07 AM

If you only need highlight use css :hover pseudo class.

tal_gi

4 May 2007, 8:41 AM

This does not work on IE6 as far as I know. Also my question is broader, I want to understand what happens when you use Ext.Element.on function, does it apply the event to all the element's children automatically, how many event listeners are attached behind the scenes, and why does there is a mouseout event from a div element when you move to it's internal child.

Thanks

Tal

jsakalos

4 May 2007, 8:49 AM

Element.on installs event handler only for THAT element. On the other hand, events are bubbling up the DOM tree what means parent also receives events from its children unless some of the childrens' handlers stops propagation.

The principle is described (among many other documents) here http://developer.mozilla.org/en/docs/DOM:event#Introduction

tal_gi

4 May 2007, 8:54 AM

That's helpful,
Still I can't use the :hover pseudo class on IE and thus I have no solution.

jsakalos

4 May 2007, 8:58 AM

Hmm, I don't know what's your html markup but try to install event hadlers as up in the DOM tree as possible and inside of the handlers check target to get the real element the event occured on.

You can also use EventObject.stopEvent method or stopEvent property of config object of the handler if you need to.

tal_gi

4 May 2007, 9:11 AM

the whole code is posted at the beginning of the thread so u can see for yourself

Thanks

jsakalos

4 May 2007, 9:19 AM

Oh, yes, blind me ;)

I found something interesting that might help you http://extjs.com/deploy/ext/docs/output/Ext.Element.html#addClassOnOver (http://extjs.com/forum/../deploy/ext/docs/output/Ext.Element.html#addClassOnOver)

tal_gi

4 May 2007, 9:39 AM

Yes I've used it before and it works fine.
The only problem is (with this method) that it adds the class to the element so if you have previous class with different background already defined it will not work. (like if you have selected element but you want that on mouse over the selection background will be overwrite by the hovering background).

jsakalos

4 May 2007, 9:42 AM

It doesn't work even if yourl class is like:

.my-class {
background-color: black ! important;
}

tal_gi

4 May 2007, 11:48 AM

Thanks that works!

jsakalos

4 May 2007, 12:22 PM

You're welcome.
I'm glad I helped.