javascript get href when link clicked

Question

Here is my situation. I have some links throughout a website. Some of them look like this:

<a target="_blank" onclick="someFunction()" href="/somFile.pdf">some file</a>

and some look like this:

<a target="_blank" href="/somFile.pdf">some file</a>

All of the links should be calling someFunction() when clicked. The ones that have the call in the onclick attribute are legacy content pages. Newer pages have a jQuery click event attached to them like so:

$(document).ready(function(){
  $('a[href$=".pdf"]').click(function() {
    someFunction();
  });
});

So here's the thing. I can update someFunction(), but I cannot touch the actual links or that jQuery. What I need is to know the href value of the link clicked. I have tried using the following within someFunction() :

var ev = window.event;
origEl = ev.target || ev.srcElement;
console.log(origEl.href);

but this does not work. I also tried console.log(window.event) and get nothing, says it is undefined. Any idea what I'm missing here, or is it basically impossible without passing a reference to it when the function is called?

edit: to be clear, I cannot as a short or even medium term solution edit the call to someFunction() in the onclick or in the jQuery code black, so I cannot for instance change them to someFunction(this) or similar. I'm not sure it is possible to get the href from within someFunction() unless I do that though :(

Answer 1

Here it is in PURE JavaScript

    //assuming links inside of a shared class "link"
    for(var i in document.getElementsByClassName('link')) {
        var link = document.getElementsByClassName('link')[i];

        link.onclick = function(e) { 
            e.preventDefault();

            //using returned e attributes
            window.location = e.srcElement.attributes.href.textContent;     
        } 
    } 

    //tested on Chrome v31 & IE 11
    //not working in Firefox v29
    //to make it work in all browsers use something like:

    if (e.srcElement === undefined){
    //scrElement is undefined in Firefox and textContent is depreciated

      window.location = e.originalTarget.attributes.href.value;
    } else {
      window.location = e.srcElement.attributes.href.textContent;
    }

    //Furthermore; when you setAttribute("key" "value"); 
    //you can access it with the above node link. 
    //So say you want to set an objectId on something     
    //manually and then grab it later; you can use 

    //Chrome & IE
    //srcElement.attributes.objectid.textContent; 

    //Firefox
    //e.originalTarget.attributes.objectid.value;

    //*Note: for some unknown reason the attribute being defined as "objectId" is changed to "objectid" when it's set.

Answer 2

You don't need anything other than this.href inside of the click callback.

$(document).ready(function()
{    
    function someFunction(foo)
    {
        console.log(foo);
    }

    $('a[href$=".pdf"]').click(function()
    {
        someFunction(this.href);
    });
});

Alternately, you can make this point to the <a> even inside of someFunction, like so:

$(document).ready(function()
{    
    function someFunction()
    {
        console.log(this.href);
        console.log(event);
    }

    $('a[href$=".pdf"]').click(someFunction);
});

or if that doesn't suit you, we can get fancier with Function.apply:

$(document).ready(function()
{    
    function someFunction(event)
    {
        console.log(this.href);
        console.log(event);
    }

    $('a[href$=".pdf"]').click(function (event)
    {
        someFunction.apply(this, event);
    });
});