How to identify that which element was clicked without modified the onclick function

Question

Possible Duplicate:
I trying to get the target element's id when function fired, but this keyword returns undefined

--- HTML file ---

<a href="#link_1" id="id_0" onclick = "getElement('parms1', 'parms2', 'parms3')">0</a>
<a href="#link_2" id="id_1" onclick = "getElement('parms1', 'parms2', 'parms3')">1</a>
<a href="#link_1" id="id_2" onclick = "getElement('parms1', 'parms2', 'parms3')">2</a>

--- Js file ---

function getElement = function(a, b, c){
    // trying to get the clicked element
    alert(this); // returns 'undefined'
}

Note: I can't modify / add / remove parameters in onclick function, but I can add / remove parameters in js file

Problem: How to identify that which element was clicked without modifying the onclick function parameters?

I think [event.target](http://api.jquery.com/event.target/) might help — keyser, Sep 19 '12 at 08:18
event.target wont help because the snippet does not include jQuery — williamcarswell, Sep 19 '12 at 08:20
@JeremyJStarcher That also seems to require you to send "this" as a parameter. — keyser, Sep 19 '12 at 08:24
@Keyser -- Yes. It is the same code, same poster and same issue. — Jeremy J Starcher, Sep 19 '12 at 08:26
@JeremyJStarcher Oh I missed that :) Well it's definitely a duplicate then, but the accepted answer seems to be missing the correct solution for this guy though (or rather, there isn't one). So why did he accept it and post a duplicate? Why K.K, why!? — keyser, Sep 19 '12 at 08:28
@Keyser -- Mine was the accepted answer. I'm assuming he accepted cause I did post a work-around, but the work around isn't pretty -- requires too much code duplication. He's looking for a simpler answer. — Jeremy J Starcher, Sep 19 '12 at 08:30
@williamcarswell: the event object is not part of jQuery, you don't need it to get to the event — Elias Van Ootegem, Sep 19 '12 at 08:32
@JeremyJStarcher Yes I noticed :p But as you mentioned yourself, that won't work with more than one link. — keyser, Sep 19 '12 at 08:39
@JeremyJStarcher: i asked again because your answer works but not as i need, i am not able to add this keyword in the onclick function, thats why i asked again. — Krishna Kumar, Sep 19 '12 at 08:49
@K.K -- It would have been better to to have edited your question with a new title rather than start a new one. That way, the whole discussion would stay together. Now, someone will have to read two separate posts. — Jeremy J Starcher, Sep 19 '12 at 08:51
@EliasVanOotegem I know but what Keyser was refering to was a jQuery documentation :D — williamcarswell, Sep 19 '12 at 09:34

score 1 · Accepted Answer · answered Sep 19 '12 at 08:40

Simple fix:

Change the HTML to:

<a href="#link_1" id="id_0" onclick = "getElement('parms1', 'parms2', 'parms3',this,event)">0</a>

And the function definition to:

//function getElement = function(){};doesn't really make sense...
function getElement (a, b, c,clicked,e)
{
    alert(clicked.id);//alerts id of clicked link
    alert((e.target || e.srcElement).id);//via the event object
}

So the choice is yours, either pass this and event to the function, or just event, or just this and you're good to go.

You might want to look into delegating this type of events, though

How to identify that which element was clicked without modified the onclick function

1 Answers1