Casey O''Neill
2006-Mar-04 00:08 UTC
Question about event listener highlighting with child elements
I have created a JavaScript object which is initialized for some input
fields, fieldsets, and divs on the page. With each object i attach a
mouseover and mouseout event that highlights and un-highlights. Also on
mouseout i am trying to display the id of the object to a console. The
highlighting works except for cases when an object is the child of another
object. In this case both are highlighted and only the parent''s id is
currently. I want only the child to be highlighted and the child(not parent)
id to be displayed.
The second issue is stopping the event listeners when the objects are
deactivated. At some point I take the list of objects and deactivate each
one. In the deactivate method I Call Event.stopObserving. This seems to have
no effect because the highlight method continues to be called.
Thanks for you help.
Casey
/*****************************************************************/
var secureComponent = Class.create();
secureComponent.prototype = {
idPath : 0,
console : '''',
oBackgroundColor : '''',
el : '''',
initialize: function(value) {
this.idPath = findSecurityIdPath(value);
//Event.observe(value, ''click'',
this.activate.bindAsEventListener(this),
false);
this.el = value;
Event.observe(value, ''mouseover'',
this.highlight.bindAsEventListener(this),
false);
Event.observe(value, ''mouseout'',
this.unhighlight.bindAsEventListener(this), false);
value.onclick = function(){return false;};
this.console = $("console");
},
activate: function(){
if(this.console != null)
this.console.innerHTML =this.idPath;
},
deactivate: function(){
this.idPath = '''';
this.console = '''';
this.el.style.backgroundColor = this.oBackgroundColor;
Event.stopObserving(this.el, ''mouseout'',
this.unhighlight.bindAsEventListener (this), false);
Event.stopObserving(this.el, ''mouseover'',
this.highlight.bindAsEventListener(this), false);
this.el = null;
},
findSecurityIdPath: function(srcElement)
{
var el;
for (el = srcElement; el != null; el = el.parentNode)
{
if(el.attributes)
{
var idPathAttrib
el.attributes.getNamedItem("securityIdPath");
var idPath = idPathAttrib ? idPathAttrib.value : false;
if (idPath)
return idPath;
}
}
return null;
},
highlight: function(e)
{
this.oBackgroundColor = this.el.style.backgroundColor;
this.el.style.backgroundColor = "#FFFFAA";
this.log(idPath);
},
log: function(msg)
{
if(this.console != null)
this.console.innerHTML =msg;
},
unhighlight: function(e)
{
this.el.style.backgroundColor = this.oBackgroundColor;
}
}
/*****************************************************************/
_______________________________________________
Rails-spinoffs mailing list
Rails-spinoffs-1W37MKcQCpIf0INCOvqR/iCwEArCW2h5@public.gmane.org
http://lists.rubyonrails.org/mailman/listinfo/rails-spinoffs
