Event Order Issue

[johnmerlino]

Hey all,

I have an object called Table that gets instantiated:

var tableReady = new Table($(this))

This Table in turn instantiates a header:

if(typeof header.attr('data-sorter') !== 'undefined') headers.push(new Header(header));

A method is attached to the Header object called attach() which simply passes in a string 'click':

	var Header = function(header){
		
		this.header = header;
		this.addEventHandler(this.header, "click", attach("click"), true); 
	}

The addEventHandler() function is declared below:

function addEventHandler(oNode, evt, oFunc, bCaptures)
{
	if (typeof(window.event) != "undefined")
		oNode.attachEvent("on"+evt, oFunc);
	else
		oNode.addEventListener(evt, oFunc, bCaptures);
}

While the addEventHandler() function is called during Header instantiation, which in turn calls attach(), attach() is never executed unless there is a click event called on header object:

	Header.prototype = {
		attach: function(event){
			var obj = this;
			if(event == "click"){
				obj.header.bind("click", function(e){ 
					obj.children()[0].preventDefault();
					return obj.calculate();
				})
			}
		},

I call preventDefault() (I'm using the jquery library as well) to try to prevent the link from responding to a click by targeting obj.children()[0] which refgers to the nested link.

Unfortunately this doesn;t work. The link is still triggered anyway. How can I force the browser not to respond to the link in the above situation, preferably using an OOP solution?

Thanks for response.

[mrhoo]

You don't preventDefault on the element, but on the event.
It is the event that bubbles, the element isn't going anywhere.

You may want to use e.preventDefault, but you definitely need to call
e.stopPropagation() after you handle it, to keep that event from percolating upwards.

Or for IE before #9, set window.event.cancelBubble to true and (maybe) window.event.returnValue to false.

[johnmerlino]

I changed it to this:

	var Header = function(header){
		
		this.header = header;
		this.attach("click");
	}
	
	Header.prototype = {
		attach: function(event){
			var obj = this;
			if(event == "click"){
				obj.header.bind("click", function(e){ 
					e.stopPropogation();
					return obj.calculate();
				})
			}
		}

Still the link responds to click. Any ideas?

[johnmerlino]

By the way, the link is nested in th tag:

	<th data-sorter="sort sort-asc" data-sort-expression="<%= :school_num %>"><a href="">School</a></th>

[johnmerlino]

Even if I target the child element and return false, the link still is triggered:

		attach: function(event){
			var obj = this;
			if(event == "click"){
				obj.header.children[0].bind("click", function(e){ 
					return false;
				})
			}
		}

[johnmerlino]

I look back at this thread and it's quite clear what the problem was. It was an issue of cross-browser inconsistency. This worked:

		attach: function(event){
			var obj = this;
			if(event == "click"){
				obj.header.bind("click", function(e){ 
					stopEvent(e);
					return obj.calculate();
				})
			}
		}

	function stopEvent(e){
		(window.event != undefined) ? window.event.cancelBubble = true : e.stopPropagation();
	}

I presume that the jquery library has something that accomodates this. But i mainly use the library for DOM traversing, as I'm not a big fan of the for loop.