Override default behaviour for link ('a') objects in Javascript

Question

Hi,

I don't know if what I'm trying to accomplish is possible at all. I would like to override the default behaviour for all the anchor objects ('a' tag) for a given HTML page. I know I can loop through all the 'a' elements and dynamically add an 'onclick' call to each one of them from the body element 'onload' method, but I'm looking for a more absolute solution. What I need is that all 'a' elements get assigned an 'onclick' action which calls a method that passes the element 'href' property as an argument, so the following:

<a href="http://domain.tld/page.html"&gt;

Dynamically becomes:

<a href="http://domain.tld/page.html" onclick="someMethodName('http://domain.tld/page.html'); return false;">

Like I said, the ideal way to do this would be to somehow override the Anchor class altogether when the document loads. If it's not possible then I'll resort to the loop-through-all 'a' elements method (which I already know how to do).

Best regards,

Answer 1

window.onload = function() {
    var anchorElements = document.getElementsByTagName('a');
    for (var i in anchorElements)
        anchorElements[i].onclick = function() {
            alert(this.href);
            return false;
        }
}

This is about the simplest way to do it. Wrap in <script type="text/javascript">...</script> in the document head and it will run on page load.

Answer 2

If you don't want to iterate over all your anchor elements, you can simply use event delegation, for example:

document.onclick = function (e) {
  e = e ||  window.event;
  var element = e.target || e.srcElement;

  if (element.tagName == 'A') {
    someFunction(element.href);
    return false; // prevent default action and stop event propagation
  }
};

Check the above example here.

Answer 3

There is no way to override all anchor elements onlick event. You could add an onclick to the document body and have logic to see if the even propagated up from an anchor element, and perform the event in that case, but this solution could cause problems if your page is complex, and isn't propagating clicks in some cases.

I would stick with the getElementsByTagName solution if its feasible.

Answer 4

Using jQuery:

$(function() {
    $("a").click(function() {
     return someMethodName($(this).attr('href'));
    });
});

function someMethodName(href)
{
    console.log(href);
    return false;
}