how to disable or enable all onClick for images on a page

Question

When the user clicks on an image, I want the onClicks on all other images to be disabled until my function has finished.

I currently have this code that disables them:

var eles = document.getElementsByTagName('img');
for (var i=0; i < eles.length; i++)
   eles[i].onclick = false;

but I'm not sure how to re enable them. I have tried:

var eles = document.getElementsByTagName('img');
for (var i=0; i < eles.length; i++)
   eles[i].onclick = true;

But its not working. anyone have solution for this problem

Answer 1

Your solution doesn't work because you removed your onClick with onClick = false. After that you need to create the onClick event handler again.

This is probably your way of adding onclick events, I changed it so it should work.

<img src="image1.jpg" onclick="when_i_click();"/>
<img src="image2.jpg" onclick="when_i_click();"/>

Try adding a function to your onclick as above.

Your onclick function:

var when_i_click = function(){
    alert('image clicked!');
}

This is how you disable your onclicks (your method)

var eles = document.getElementsByTagName('img');
for (var i=0; i < eles.length; i++)
   eles[i].onclick = null;

This is how you re-enable them (re-attach function to onClick )

var eles = document.getElementsByTagName('img');
for (var i=0; i < eles.length; i++)
   eles[i].onclick = when_i_click;

This is a Jquery solution jquery:

Try using unobstructive javascript, by not adding onclick event handlers in the DOM.

<script>
(function(){
    var function_is_finished = false;
    $('img').on('click',function(event){
        if(function_is_finished) {
            //Do your stuff when someone clicks on Img
        }
    });
})();
</script>

When your function is finished just set function_is_finished to true

Answer 2

One solution is to save the previous value of onclick and restore it:

var disable_all = function () {
    var eles = document.getElementsByTagName('div');
    for (var i=0; i < eles.length; i++) {
      eles[i].prev_click = eles[i].onclick; // save the previous value
      eles[i].onclick = false;
    }
}

var enable_all = function() {
    var eles = document.getElementsByTagName('div');
    for (var i=0; i < eles.length; i++)
       eles[i].onclick = eles[i].prev_click;  // restore the previous value
    };