onClick - > Fiddle 在第一次点击时工作，但停止工作 - 谜答案

【问题标题】：onClick -> Fiddle works on the first click, but stops working - misteryonClick - > Fiddle 在第一次点击时工作，但停止工作 - 谜
【发布时间】：2013-01-12 20:15:56
【问题描述】：

我有这个jsfiddle，它可以工作一次。

function toggle_off(itemID){
  alert(itemID+'->'+document.getElementById(itemID).getAttribute("style"));
  document.getElementById(itemID).style.display = 'none';
}

function maskIt(x){
  alert(x);
  var mask = document.createElement('div');
  mask.id = 'maskIt';
  mask.setAttribute("class", "maskIt");
  mask.onclick = function(){toggle_off('maskIt');}
  mask.innerHTML = 'click to close mask';
  document.body.appendChild(mask);
}

点击它会打开一个遮罩（图层），点击遮罩 - 会自行关闭它 - 到这里为止都很好。

第二次点击时，面具会再次打开，但当你第二次点击它时，它不会关闭。

有什么想法吗？

【问题讨论】：

标签： javascript onclick layer mask

【解决方案1】：

您应该在每次点击创建一个新 div 时将其删除，而不是隐藏 div

function toggle_off(itemID){
  alert(itemID+'->'+document.getElementById(itemID).getAttribute("style"));
  var mask = document.getElementById(itemID);
  mask.parentNode.removeChild(mask);
}

DEMO

【讨论】：

【解决方案2】：

当您关闭叠加层时，您不会破坏“maskIt”的第一个实例，因此它们会在后台建立。如果您在第二次单击后检查页面，您将看到两个 maskIt div，第一个隐藏。

当您调用 getElementById('maskIt') 时，它会在文档中找到第一个隐藏的一个，因此不会隐藏第二个。

为什么不重复使用第一个掩码？

function toggle_off(itemID) {
  alert(itemID + '->' + document.getElementById(itemID).getAttribute("style"));
  document.getElementById(itemID).style.display = 'none';
}

function maskIt(x) {
  alert(x);
  var mask = document.getElementById('maskIt');
  if (mask == null) {
    mask = document.createElement('div');
    mask.id = 'maskIt';
    mask.setAttribute("class", "maskIt");
    mask.onclick = function () {
      toggle_off('maskIt');
    }
    mask.innerHTML = 'click to close mask';
    document.body.appendChild(mask);
  }
  else
  {
    mask.style.display = "block";
  }
}

http://jsfiddle.net/dFp6f/2/

【讨论】：