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

问题

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

回答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

回答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
    };

回答3:

onclick it suppposed to be pointing to a javascript function. instead of onclick try with.

eles[i].disabled="true"

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

回答4:

by setting eles[i].onclick = false; you are reassigning the onclick event to false. setting back to true does not assign it back to the original function. It is probably better to handle the un-assigning in the event function instead.

回答5:

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

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

then

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

What you should do is maintaining some variable that you check against to see if you can start the function or not.

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

来源：https://stackoverflow.com/questions/15003526/how-to-disable-or-enable-all-onclick-for-images-on-a-page

标签

javascript

html

onclick

image