Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts

    Event Order Issue

    Hey all,

    I have an object called Table that gets instantiated:
    Code:
    var tableReady = new Table($(this))
    This Table in turn instantiates a header:
    Code:
    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':
    Code:
    	var Header = function(header){
    		
    		this.header = header;
    		this.addEventHandler(this.header, "click", attach("click"), true); 
    	}
    The addEventHandler() function is declared below:
    Code:
    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:
    Code:
    	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.

  • #2
    Regular Coder
    Join Date
    Mar 2006
    Posts
    726
    Thanks
    35
    Thanked 132 Times in 123 Posts
    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.

  • #3
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    I changed it to this:
    Code:
    	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?

  • #4
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    By the way, the link is nested in th tag:
    Code:
    	<th data-sorter="sort sort-asc" data-sort-expression="<%= :school_num %>"><a href="">School</a></th>

  • #5
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    Even if I target the child element and return false, the link still is triggered:
    Code:
    		attach: function(event){
    			var obj = this;
    			if(event == "click"){
    				obj.header.children[0].bind("click", function(e){ 
    					return false;
    				})
    			}
    		}

  • #6
    Regular Coder
    Join Date
    Oct 2009
    Posts
    189
    Thanks
    38
    Thanked 3 Times in 3 Posts
    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:
    Code:
    		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.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •