onClick→小提琴工作在第一次点击，但停止工作-神秘

onClick -> Fiddle works on the first click, but stops working - mistery

本文关键字：停止工作 神秘 小提琴 工作 第一次 onClick      更新时间：2023-09-26

我有这个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);
}

点击它打开一个蒙版(图层)，点击蒙版-关闭它自己-直到这里。

在第二次点击时，掩码再次打开，但当你第二次点击它时，它不会关闭。

任何想法?

与其隐藏div，不如在每次点击

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

当你关闭覆盖时，你并没有破坏"maskIt"的第一个实例，所以它们在背景中建立起来。如果你在第二次点击后检查页面，你会看到两个maskItdiv，第一个隐藏。

当你调用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/

相关文章：