JavaScript: Adding an onClick handler without overwriting the existing one

Question

I'm trying to modify all links on a page so they perform some additional work when they are clicked.

A trivial approach might be something like this:

function adaptLinks()
{
    var links = document.getElementsByTagName('a');
    for(i = 0; i != links.length; i++)
    {
        links[i].onclick = function (e)
        {
            <do some work>
            return true;
        }
    }
}

But some of the links already have an onClick handler that should be preserved. I tried the following:

function adaptLinks()
{
    var links = document.getElementsByTagName('a');
    for(i = 0; i != links.length; i++)
    {
        var oldOnClick = links[i].onclick;
        links[i].onclick = function (e)
        {
            if(oldOnClick != null && !oldOnClick())
            {
                return false;
            }
            <do some work>
            return true;
        }
    }
}

But this doesn't work because oldOnClick is only evaluated when the handler is called (it contains the value of the last link as this point).

I've seen that many similar tasks around here are solved using jQuery. I'm currently looking into it as it seems to ease several other tasks as well. — rluba
– rluba, Commented May 21, 2009 at 10:37

annakata · Accepted Answer · 2009-05-21 09:18:00Z

21

Don't assign to an event handler directly: use the subscribe model addEventListener / attachEvent instead (which also have remove pairs!).

Good introduction here.

answered May 21, 2009 at 9:18

annakata

76k18 gold badges116 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

jrharshath Over a year ago

Or, you could use a javascript library (/me votes for jQuery) that would let you do the same with a lot more ease. But you must still go through the theory at the quirksmode page. It's quite soul-enriching for a javascript developer.

annakata Over a year ago

"Ease" is relative. I can wrap this stuff in a 5 line method OR I can download a multi-K library. A library is good to have, but not at the expense of knowing how to actually do something yourself. I wouldn't anti-vote jquery, I'm just not keen on the kneejerk.

rluba Over a year ago

I agree that you shouldn't use a huge library just to save 10 minutes of coding / learning. But jQuery seems to help with some of my other tasks as well, so I'm currently looking into it.

annakata Over a year ago

As well you should. I strongly advocate a developer learning libraries, I've just seen too many guys who could use jquery but not JS.

rluba Over a year ago

Another reason why I started to use JQuery is the problem with "this" references when using the Microsoft model (as described on Quirksmode). I need a proper "this" reference and will not waste my time coding around this issue if others have already solved it (e.g. in JQuery)

|

Joe · Accepted Answer · 2012-03-14 19:24:44Z

20

You need to create a closure to preserve the original onclick value of each link:

<a href="#" onclick="alert('hi');return false;">Hi</a>
<a href="#" onclick="alert('there');return true;">There</a>
<script type="text/javascript">
function adaptLinks() {
    var links = document.getElementsByTagName('a');
    for (i = 0; i != links.length; i++) {
        links[i].onclick = (function () {
            var origOnClick = links[i].onclick;
            return function (e) {
                if (origOnClick != null && !origOnClick()) {
                    return false;
                }
                // do new onclick handling only if
                // original onclick returns true
                alert('some work');
                return true;
            }
        })();
    }
}
adaptLinks();
</script>

Note that this implementation only performs the new onclick handling if the original onclick handler returns true. That's fine if that's what you want, but keep in mind you'll have to modify the code slightly if you want to perform the new onclick handling even if the original handler returns false.

More on closures at the comp.lang.javascript FAQ and from Douglas Crockford.

edited Mar 14, 2012 at 19:24

Joe

42.2k13 gold badges48 silver badges62 bronze badges

answered May 21, 2009 at 16:39

Grant Wagner

26k7 gold badges57 silver badges65 bronze badges

1 Comment

rluba Over a year ago

+1 for the hint on closures. My example was specifically designed to execute only if the original handler didn't cancel, so your example fits nicely.

outis · Accepted Answer · 2009-05-21 09:36:30Z

4

Use a wrapper around addEventListener (DOM supporting browsers) or attachEvent (IE).

Note that if you ever want to store a value in a variable without overwriting the old value, you can use closures.

function chain(oldFunc, newFunc) {
  if (oldFunc) {
    return function() {
      oldFunc.call(this, arguments);
      newFunc.call(this, arguments);
    }
  } else {
    return newFunc;
  }
}

obj.method = chain(obj.method, newMethod);

In Aspect Oriented Programming, this is known as "advice".

edited May 21, 2009 at 9:36

answered May 21, 2009 at 9:18

outis

77.7k23 gold badges155 silver badges228 bronze badges

Comments

Russ Cam · Accepted Answer · 2009-05-21 09:36:27Z

0

how about setting oldClick = links[i].onclick or an empty function. Like so

var oldOnClick = links[i].onclick || function() { return true; };

links[i].onclick = function (e)
   {
       if (!oldOnClick())
           return false;
       //<do some work>
       return true;
   }

Or you could use attachEvent and addEventListener as others have recommended

function addEvent(obj, type, fn) {
        if (obj.addEventListener)
                obj.addEventListener(type, fn, false);
        else if (obj.attachEvent)
                obj.attachEvent('on' + type, function() { return fn.apply(obj, [window.event]);});
}

and use like so

addEvent(links[i], 'click', [your function here]);

edited May 21, 2009 at 9:36

answered May 21, 2009 at 9:19

Russ Cam

126k34 gold badges211 silver badges275 bronze badges

2 Comments

rluba Over a year ago

It doesn't solve the problem that oldOnClick is evaluated when the handler is called and not when it's written. Plus: It fails to return false if the old onclick handler returns false (to stop the link from working).

Russ Cam Over a year ago

Ah, I understand the problem better. Could you not return false if oldOnClick returns false?

rluba · Accepted Answer · 2009-05-21 12:10:28Z

0

Using JQuery, the following code works:

function adaptLinks(table, sortableTable)
{
    $('a[href]').click(function (e)
    {
        if(!e.isDefaultPrevented())
        {
            <do some work>
        }
    });
}

This requires using an extra library but avoids some issues that exist with addEventListener/attachEvent (like the latter's problem with this references).

There is just one pitfall: if the original onClick handler is assigned using "normal" JavaScript, the line

...
if(!e.isDefaultPrevented())
...

will always resolve to true, even in case the original handler canceled the event by returning false. To fix this, the original handler has to use JQuery as well.

edited May 21, 2009 at 12:10

answered May 21, 2009 at 11:14

rluba

2,0542 gold badges19 silver badges26 bronze badges

Comments

Zelid · Accepted Answer · 2009-08-06 19:27:46Z

0

This function should be usable (event listeners approach):

function addEventListener(element, eventType, eventHandler, useCapture) {
    if (element.addEventListener) {
        element.addEventListener(eventType, eventHandler, useCapture);
        return true;
    } else if (element.attachEvent) {
        return element.attachEvent('on' + eventType, eventHandler);
    }
    element['on' + eventType] = eventHandler;
}

or you can save some more code adding this function (if you need to add the same event listener to many elements):

function addClickListener(element) {
    addEventListener(element, 'click', clickHandler, false);
}

answered Aug 6, 2009 at 19:27

Zelid

7,23511 gold badges55 silver badges76 bronze badges

Comments

Julian Kuiters · Accepted Answer · 2010-01-08 03:20:11Z

0

I had problems with overloading in the simple way - this page was a great resource http://www.quirksmode.org/js/events_advanced.html

answered Jan 8, 2010 at 3:20

Julian Kuiters

311 bronze badge

Collectives™ on Stack Overflow

JavaScript: Adding an onClick handler without overwriting the existing one

7 Answers 7

6 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

6 Comments

1 Comment

Comments

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related