Override javascript click event one time

Question

I would like to replace the default action of an click event for all anchors in a webpage. When I use this piece of code:

<html> <head> <script>     
var list=document.getElementsByTagName("a");
var isChecked = false;

function load () {    
    for (i=0; i<list.length; i++)
    {
        var old = (list[i].onclick) ? list[i].onclick : function () {}; 
        list[i].onclick = function () {                 
        if( !isChecked)
        {
            test(); 
            old();
        }
        else
            old();
        };  
    }
}    
function test() {
    alert("new action");
    isChecked = true;
}     
</script> </head> 
<body onload="load();">     
<a id="nr_1" onClick="alert('test');"> Anchor 1 </A>
<a id="nr_2" onClick="alert('test2');"> Anchor 2 </A>      
</body> </html>

When I click an anchor I get the alert out of the test function and then the default function of the second anchor (even when I click the first anchor). When I then again click one of the two anchors I always get the Alert from the second anchor. How do I put the original onclick functions back for each anchor element? When someone has an solution in jquery I would be glad as well.

EDIT

I was succesfull using this code:

function load()
{
$('a').attr('disabled', 'disabled');

$('a').click(function(e){
    if($(this).attr('disabled'))
    {
    alert("new");
    e.preventDefault(); 
    $('a').removeAttr("disabled");  
    this.click();
    }
});
}

On loading of the page this function is called giving all anchor elements a "disabled" attribute. After clicking the element the e.preventDefault() function disables the inline onclick function. Then I remove the "disabled" attribute and call the click function of the element again. because now the element doesn't have a "disabled" attribute only the default function is performed. I'm still open for "more elegant" solutions to this problem, but for now I'm a happy camper!

try this: onClick="alert('test'); return false;" it should stop the link from navigating and thus stay on the same page and have your variable values — Gerald Versluis
– Gerald Versluis, Commented Jul 18, 2012 at 13:10

jbabey · Accepted Answer · 2012-07-18 13:20:12Z

2

If you use jQuery you can combine a one-time handler with a persistent handler:

Documentation for .one() and .on()

Working Example: http://jsfiddle.net/Q8gmN/

Sample HTML:

<input type="button" id="click" value="click" />

Sample JavaScript:

button.one('click', function () {
  console.log('one time function fired');  
});

button.on('click', function () {
  console.log('persistent function fired');  
});

answered Jul 18, 2012 at 13:20

jbabey

46.7k12 gold badges73 silver badges94 bronze badges

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

3 Comments

jbabey Over a year ago

As a side note, I am not sure how jQuery will order these two events. If order is important, you may want to investigate this. Related question - stackoverflow.com/questions/2360655/…

Fred Sterk Over a year ago

For additional information I am not able to edit the HTML code and the anchor tags have an existing onclick function (as inline attribute)

jbabey Over a year ago

then just use the .one() handler.

Collectives™ on Stack Overflow

Override javascript click event one time

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related