Html 如何禁用或启用页面上的所有 onClick 图像

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

提问by spogebob92

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

当用户单击图像时，我希望禁用所有其他图像上的 onClicks，直到我的功能完成。

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

但它不工作。任何人都有这个问题的解决方案

采纳答案by Timmetje

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

您的解决方案不起作用，因为您使用 onClick = false 删除了 onClick。之后，您需要再次创建 onClick 事件处理程序。

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

这可能是您添加 onclick 事件的方式，我对其进行了更改，因此它应该可以工作。

<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 添加一个函数，如上所示。

Your onclick function:

您的点击功能：

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

This is how you disable your onclicks (your method)

这就是您禁用 onclicks 的方式（您的方法）

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 )

这是您重新启用它们的方式（将函数重新附加到 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:

这是一个 Jquery 解决方案 jquery：

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

尝试使用无障碍 javascript，不要在 DOM 中添加 onclick 事件处理程序。

<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_finishedto true

当您的功能完成时，只需设置function_is_finished为true

回答by Iftah

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

一种解决方案是保存 onclick 的先前值并恢复它：

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

回答by cri_sys

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

onclick 它应该指向一个 javascript 函数。而不是 onclick 尝试。

eles[i].disabled="true"

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

在你的方法结束时回到 eles[i].disabled="false"

回答by malkassem

by setting eles[i].onclick = false;you are reassigning the onclickevent 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.

通过设置，eles[i].onclick = false;您将onclick事件重新分配给false. 设置回 true 不会将其分配回原始函数。最好在事件函数中处理取消分配。

回答by sitifensys

Basically you're setting the elements' onclickto falseand true. it's the equivalent of doing something like

基本上，您将元素设置onclick为false和true。这相当于做类似的事情

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