Can I tell anything about a hyperlink that was clicked in JavaScript?

Question

If I have code like this:

<script>
function determine()
{
    // ????
}
</script>

<a href="blah1" onclick="determine()">blah1</a>
<a href="blah2" onclick="determine()">blah2</a>

Is there a way in determine() to see which link was clicked?

(Yes, I know, the easy and correct thing to do would be to pass "this" to determine()...but in this case that's not going to be easy to do because of legacy code issues.)

EDIT: I probably should have mentioned this at the beginning...our site is not currently using (and cannot use, for the time being) JQuery...so JQuery answers (while valuable in general for this type of question) won't actually help me.

Answer 1

Check out this link from quirksmode. You can get the event target.

function doSomething(e) {
    var targ;
    if (!e) var e = window.event;
    if (e.target) targ = e.target;
    else if (e.srcElement) targ = e.srcElement;
    if (targ.nodeType == 3) // defeat Safari bug
     targ = targ.parentNode;
}

Answer 2

you could add events to each link like so

links = document.getElementsByTagName('a');

for (link in links) {

   link.onclick = function() {
      alert(this.id);
      determine(); // or some other important code?
   }

}

Answer 3

You can with straight up JavaScript, but I prefer to use something like jQuery:

<a href="blah1">blah1</a>

<script type="text/javascript">
  $('a[href=blah1]').click(function() {
    var link = $(this); // here's your link.
    return false; // acts like the link was not clicked. return true to carry out the click.
  });
</script>

Assuming you are using the $().click() functionality, $(this) will give you the link.

Answer 4

If you cannot change the onclick="determine()" in your HTML, but you can change the determine() function, then I think your best bet is to:

Leave the determine() function blank so it doesn't do anything.

Use javascript (as described by other answers) to add a real click handler to each link, and use the event to determine which link was clicked then execute the desired code.

Answer 5

Another solution:

Add an onclick handler to the document. When a user clicks the link, the click event will "bubble" up to the window, and you will have access to the event to determine which link was clicked.

This might be useful if you only want the code to run for those links that already have onclick="determine()" - you could set the determine() function to set a variable. Then when the user clicks the link, the determine() function runs to set the variable, and when the document click handler runs you could check for the variable - then you will know that the link had onclick="determine()".

Let me know if I can make this a little more complicated for you... :-)

Answer 6

If you can't change the onclick attribute, patch it via JavaScript:

// use a DOMContentLoaded hack or `onload` as fallback
onload = function() {
    var links = document.links;
    for(var i = 0; i < links.length; ++i) {
     // there might be a better way to check which links to modify
     // don't know without further details
     if(/determine\(\)/.test(links[i].onclick))
      links[i].onclick = determine;
    }
};

function determine() {
    // the link is now available as `this`
    alert(this.href);
}

Perhaps an even better solution would be to patch in a global, IE-style event object for standards compliant browsers:

if(document.addEventListener) {
    document.addEventListener('click', function(e) {
     window.event = e;
    }, true);
}

function determine() {
    var src = event.target || event.srcElement;
    alert(src.href);
}