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