“如何撤销”；这个.onclick=null"；？如何将javascript onclick功能恢复到div？

我正在显示具有默认背景色的div。当我单击它一次时，它会改变颜色。第二次单击没有任何作用，因为div有以下代码：“this.onclick=null”。这样做效果很好

但是，单击div一次后，我想单击一个按钮来恢复其onclick功能。但是我为此创建的按钮不起作用，因为我不知道使用什么javascript代码。有人知道吗

正如你所看到的，我正在使用Bootstrap3。（请注意，我是一名初学者，只具备php和js的基本知识。）以下是我的代码：

div的HTML：

<div class="row">
  <div class="col-sm-12">
    <div id="testDiv" style="background-color: #0000FF" onclick="colorClick(id); this.onclick=null;">
      Clicking this div once changes the color.
    </div>
  </div>
</div>

function colorClick(id){
var randomColor = '#'+Math.floor(Math.random()*16777215).toString(16);   
document.getElementById(id).style.backgroundColor=randomColor;

/* The random color generator is from stackoverflow.com/questions/1484506/random-color-generator */
}

按钮的HTML格式：

<div class="row">
  <div class="col-sm-12">
        <button type='button' class='btn btn-default btn-lg' onclick=reEnableOnclick()>
      This button should re-enable the onclick functionality, but it does not
    </button>
  </div>
</div>

function reEnableOnclick(){
document.getElementById("testDiv").onclick=click;  /* This is only pseudo-code. What real code should I put here? */
}

（两个js函数都位于单独的.js文档中）

---

编辑#2：这需要在同一页上使用大约100个div。

单击指定原始的

onclick

code

function reEnableOnclick() {
    document.getElementById("testDiv").onclick = "colorClick(id); this.onclick=null;";
}

---

在单击时指定原始的

onclick

code

function reEnableOnclick() {
    document.getElementById("testDiv").onclick = "colorClick(id); this.onclick=null;";
}

---

可以在javascript代码中使用一个伪变量来实现此目的

在这种情况下，你可以写

HTML代码

<div class="row">
  <div class="col-sm-12">
    <div id="testDiv" style="background-color: #0000FF" onclick="colorClick(id)">
      Clicking this div once changes the color.
    </div>
  </div>
</div>

<div class="row">
  <div class="col-sm-12">
        <button type='button' class='btn btn-default btn-lg' onclick=reEnableOnclick()>
      This button should re-enable the onclick functionality, but it does not
    </button>
  </div>
</div>

现在，默认情况下，您会将divDisabled设置为false，这样第一次单击div就可以按您的需要工作&接下来单击div就不会像现在这样了

---

但是，只要点击按钮click，它就会启用click-on-div，并将buttonDisable设置为false，因此它将再次在div上工作一次，正如您所希望的那样，

您可以在javascript代码中使用一个用于此目的的伪变量

在这种情况下，你可以写

HTML代码

<div class="row">
  <div class="col-sm-12">
    <div id="testDiv" style="background-color: #0000FF" onclick="colorClick(id)">
      Clicking this div once changes the color.
    </div>
  </div>
</div>

<div class="row">
  <div class="col-sm-12">
        <button type='button' class='btn btn-default btn-lg' onclick=reEnableOnclick()>
      This button should re-enable the onclick functionality, but it does not
    </button>
  </div>
</div>

现在，默认情况下，您会将divDisabled设置为false，这样第一次单击div就可以按您的需要工作&接下来单击div就不会像现在这样了

---

但是，一旦您点击按钮，它将启用click on div，并将buttonDisable设置为false，因此它将再次在div上工作一次，如您所愿

您可以定义函数在分配之外运行

onclick

，并使用它设置和重置click处理程序

function functionThatRunsWhenButtonClicked() {
    // do stuff
}

然后在需要分配的地方，分配

<div class="row">
  <div class="col-sm-12">
    <div id="testDiv" style="background-color: #0000FF" onclick="functionThatRunsWhenButtonClicked(); this.onclick=null;">
      Clicking this div once changes the color.
    </div>
  </div>
</div>

function reEnableOnclick(){
    document.getElementById("testDiv").onclick=functionThatRunsWhenButtonClicked;  /* This 
    is only pseudo-code. What real code should I put here? */
}

单击此div一次即可更改颜色。
函数reEnableOnclick（）{
document.getElementById（“testDiv”）.onclick=在单击按钮时运行的函数；/*此
只是伪代码。我应该在这里放什么真正的代码*/
}

---

您可以使用

colorClick（id）

执行相同的操作。您可以定义在分配之外运行

onclick

的函数，并使用它设置和重置单击处理程序

function functionThatRunsWhenButtonClicked() {
    // do stuff
}

然后在需要分配的地方，分配

<div class="row">
  <div class="col-sm-12">
    <div id="testDiv" style="background-color: #0000FF" onclick="functionThatRunsWhenButtonClicked(); this.onclick=null;">
      Clicking this div once changes the color.
    </div>
  </div>
</div>

function reEnableOnclick(){
    document.getElementById("testDiv").onclick=functionThatRunsWhenButtonClicked;  /* This 
    is only pseudo-code. What real code should I put here? */
}

单击此div一次即可更改颜色。
函数reEnableOnclick（）{
document.getElementById（“testDiv”）.onclick=在单击按钮时运行的函数；/*此
只是伪代码。我应该在这里放什么真正的代码*/
}

---

您可以使用

colorClick（id）

执行相同的操作。不要删除单击事件，只需检查一个标志以查看行为是否已启用。例如：

var clickEnabled=true；
函数颜色单击（id）{
如果（单击启用）{
var randomColor='#'+Math.floor（Math.random（）*16777215）.toString（16）；
document.getElementById（id）.style.backgroundColor=randomColor；
clickEnabled=false；
}
}
函数reEnableOnclick（）{
clickEnabled=true；
}

单击此div一次即可更改颜色。
此按钮将重新启用onclick功能

不要删除单击事件，只需检查一个标志以查看行为是否已启用。例如：

var clickEnabled=true；
函数颜色单击（id）{
如果（单击启用）{
var randomColor='#'+Math.floor（Math.random（）*16777215）.toString（16）；
document.getElementById（id）.style.backgroundColor=randomColor；
clickEnabled=false；
}
}
函数reEnableOnclick（）{
clickEnabled=true；
}

单击此div一次即可更改颜色。
此按钮将重新启用onclick功能

由于您需要将此功能应用于100个div，请尝试始终只跟踪锁定状态，而不是所有div状态。假设每个div id都是唯一的，您可以尝试：

Javascript:

    let locked = [];

    function lockCheckRun(id) { 
        let divID = document.getElementById(id);    
        if (!locked.includes(divID) {
            colorClick(id);
            locked.push(divID);
        }
    }

    function lockReset() {
        locked.length = 0;
    }

说明：

    let locked = [];

    function lockCheckRun(id) { 
        let divID = document.getElementById(id);    
        if (!locked.includes(divID) {
            colorClick(id);
            locked.push(divID);
        }
    }

    function lockReset() {
        locked.length = 0;
    }

创建一个空数组来存储锁定的元素ID。我们将此数组称为“锁定”

接下来，创建一个函数，检查锁定的数组是否包含当前唯一的元素id。如果不包含，则我们将运行“colorClick”函数。完成后，我们将通过.push（）将当前元素id添加到“锁定”数组

如果要重置锁定的元素数组，请运行“锁定重置”功能

可选的Polyfill可与旧浏览器兼容：

    let locked = [];

    function lockCheckRun(id) { 
        let divID = document.getElementById(id);    
        if (!locked.includes(divID) {
            colorClick(id);
            locked.push(divID);
        }
    }

    function lockReset() {
        locked.length = 0;
    }

---

由于您需要将此功能应用于100个div，请尝试只跟踪锁定状态，而不是始终跟踪所有div状态。假设每个div id都是唯一的，您可以尝试：

Javascript:

    let locked = [];

    function lockCheckRun(id) { 
        let divID = document.getElementById(id);    
        if (!locked.includes(divID) {
            colorClick(id);
            locked.push(divID);
        }
    }

    function lockReset() {
        locked.length = 0;
    }

说明：

    let locked = [];

    function lockCheckRun(id) { 
        let divID = document.getElementById(id);    
        if (!locked.includes(divID) {
            colorClick(id);
            locked.push(divID);
        }
    }

    function lockReset() {
        locked.length = 0;
    }

创建一个空数组来存储锁定的元素ID。我们将此数组称为“锁定”

接下来，创建一个函数，检查锁定的数组是否包含当前唯一的元素id。如果不包含，则我们将运行“colorClick”函数。完成后，我们将通过.push（）将当前元素id添加到“锁定”数组

如果要重置锁定的元素数组，请运行“锁定重置”功能

可选的Polyfill可与旧浏览器兼容：

    let locked = [];

    function lockCheckRun(id) { 
        let divID = document.getElementById(id);    
        if (!locked.includes(divID) {
            colorClick(id);
            locked.push(divID);
        }
    }

    function lockReset() {
        locked.length = 0;
    }

---

感谢大家的建议和解决方案@Sarfraaz现在我正在尝试实现它，我发现了一个问题：我通常需要将它应用于同一页面上的大约100个div。因此，与其从一个“var divDisabled=false；”语句开始，我希望