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

Question

When a user clicks on an image, I want onClicks on all other images to be disabled before the completion of my function.

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 turn them on. I tried:

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

But it does not work. who has a solution to this problem

Answer 1

Your solution does not work because you deleted 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 modified it to make it 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.

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; 

Here's how you reactivate them (re-attach the function to onClick)

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

This is jQuery jQuery:

Try using unobtrusive javascript without adding onclick event handlers to 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

onclick it supposedly points to a javascript function. try on with instead of onclick.

 eles[i].disabled="true" 

and at the end of your method return to eles [i] .disabled = "false"

Answer 3

One solution is to save the previous onclick value 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 }; 

Answer 4

by setting eles[i].onclick = false; , you reassign the onclick event to false . returning to true does not assign it to the original function. It is probably best to handle not assigning events to the function.

Answer 5

Basically you set the ' onclick elements to false and true . it's the equivalent of doing something like

 <img src=".." onclick="false"/> 

then

 <img src=".." onclick="true"/> 

What you need to do is to maintain some variable that you are checking to see if you can run this function or not.

 locked = false; function yourFunction() { if (locked) { locked = true; //... Do what you have to do here locked = false; }; }