www.webdeveloper.com
Results 1 to 5 of 5

Thread: Inline On Click Working But AddEventListener is not

  1. #1
    Join Date
    Dec 2010
    Posts
    232

    Inline On Click Working But AddEventListener is not

    I'm having a strange problem with a clickable element. Basically I have this:-

    Code:
    <a id="myLink" href="#">
       <span>John</span>
       <span>Smith</span>
    </a>
    I want a javascript function to fire when the anchor tag is clicked. When I apply the function to the anchor tag inline like this:-

    Code:
    onClick="myFunction(this)"
    and then click the anchor tag the function fires however if I do this:-

    Code:
    e=document.getElementById('myLink');
    e.addEventListener("click",myFunction(),false);
    OR

    Code:
    e.attachEvent("onclick",myFunction());
    the function doesn't fire. It seems to act as though the spans are being clicked as opposed to the anchor tag which is strange considering an inline onclick works the way I want i.e. as if the anchor tag is being clicked.

    The only way I can get it to fire via the second method is to remove the inline spans so it looks like this:-

    Code:
    <a id="myLink" href="#">John Smith</a>
    Which is not how I need it.

    Can anyone help me out with this please?
    Last edited by jimmyoneshot; 05-16-2012 at 03:39 PM.

  2. #2
    Join Date
    Nov 2010
    Posts
    978
    I'm thinking that adding the brackets after your function name will call the function immediately as the event is attached/added. Dunno if that was your problem, but anyway... this seems to work:

    Code:
    <body>
    <a id="myLink" href="#">
       <span>John</span>
       <span>Smith</span>
    </a>
    <script type="text/javascript">
    if (window.addEventListener)
    addEvent = function(ob, type, fn ) {
    ob.addEventListener(type, fn, false );
    };
    else if (document.attachEvent)
    addEvent = function(ob, type, fn ) {
    var eProp = type + fn;
    ob['e'+eProp] = fn;
    ob[eProp] = function(){ob['e'+eProp]( window.event );};
    ob.attachEvent( 'on'+type, ob[eProp]);
    };
    
    addEvent(document.getElementById('myLink'),'click', myFunction)
    
    function myFunction()
    {
    alert("success!")
    }
    </script>
    
    </body>
    although if you would like to pass "this" to the function you have some more cross-browser fun ahead of you

  3. #3
    Join Date
    Dec 2010
    Posts
    232
    Thanks again xelawho. Yep unfortunately I do need to pass "this" too. The previous code I posted was very simplified so that it simply addressed the problem at hand but in my actual code I have data attributes that I need to access on the anchor tag itself when it's clicked which looks more like his:-

    Code:
    <a href="#" data-details="{MY DATA GOES HERE}"><span>John</span><span>Smith</span></a>
    My actual javascript is like what we discussed in a previous thread:-

    Code:
    window.onload=function(){
    	ar=document.getElementById('uiList');
    	if (window.addEventListener){
    		ar.addEventListener("click",function(e){delegate(e);},false);
    		ar.addEventListener("mouseover",function(e){delegate(e);},false);
    		ar.addEventListener("mouseout",function(e){delegate(e);},false);
    	}else{
    		ar.attachEvent("click",function(e){delegate(e);});
    		ar.attachEvent("mouseover",myFunction);		
    		ar.attachEvent("mouseout",myFunction);		
    	}
    };
    
    function delegate(e){
    	if(e.target && e.target.className.indexOf('ui')!=-1){
    		var c = e.target.className.split(" ");
    		if(c){
    			for(i=0;i<c.length;i++){
    				
    				if(e.type=="click"){
    					if(c[i]=="test1"){
    						test1(e.target);
    					}
    
    					if(c[i]=="test2"){
    						test2(e.target);
    					}
    				}
    				
    				if(e.type=="mouseover"){
    					if(c[i]=="test3"){
    						test3(e.target);
    					}
    				}
    
    				if(e.type=="mouseout"){
    					if(c[i]=="test4"){
    						test4(e.target);
    					}
    				}
    								
    			}
    		}
    	}	
    }

  4. #4
    Join Date
    Dec 2010
    Posts
    232
    Also I want my event to fire when an appropriate element is interacted with rather than attaching events to all elements. At the moment I am trying to delegate events by attaching listeners to parent elements only e.g. a ul rather than all lis in the ul and then when an element is clicked if it has the class "j_myFunction" for example then when it is clicked "myFunction(this)" should fire there and then.

    So in this example the events could be attached to the body tag and then clicks of any anchor tags could be listened for there.
    Last edited by jimmyoneshot; 05-17-2012 at 05:42 PM.

  5. #5
    Join Date
    Dec 2010
    Posts
    232
    I think I've found a fix. In my delegate code I added this:-

    Code:
    var ta=e.target||e.srcElement;
    
    while(ta && !(ta.className.indexOf('ui')!=-1)){
    ta = ta.parentNode;
    if(ta.tagName=="BODY"){return false};
    }
    This means when the spans get clicked and the event gets recognised it checks if they have the ui class, then if not they check the parent, if that doesn't have it check the next parent etc etc until it gets the appropriate clicked/hovered/unhovered element.

    I've added the "if(ta.tagName=="BODY"){return false};" line in to stop this when it gets to the body tag.

    Does this seem like a good way of doing this?

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles