Question

我在我的网站点击按钮时运行的函数有一些代码：

function shadow() {
    document.getElementById("overlay").style.visibility="visible";
    document.getElementById("dim").style.visibility="visible";
    document.getElementById("dim").onclick="document.getElementById('dim','overlay').style.visibility='hidden'";
}

叠加是我想要重新隐藏的叠加div，并且当函数运行时，暗淡是整个页面上较低的z-index调光器。第三行是我尝试制作它，以便当点击叠加层之外的区域时，暗淡和叠加层消失 - 对此的帮助会很棒！

Answer 1

onclick property需要函数引用，而不是字符串。此外，getElementById方法只接受一个id参数，这意味着只会选择传递给它的第一个元素id。

根据您提供的代码，看起来您想要这样的内容（live example）：

function shadow() {
  var overlay = document.getElementById('overlay');
  var dim = document.getElementById('dim');

  overlay.style.visibility = 'visible';
  dim.style.visibility = 'visible';

  dim.onclick = function() {
    overlay.style.visibility = 'hidden';
    dim.style.visibility = 'hidden';
  };
}

或者，您也可以向document添加点击事件监听器，然后确定event.target是否为#overlay元素。

例如，以下内容可行（live example）：

document.addEventListener('click', function (event) {
  var overlay = document.getElementById('overlay');
  var dim = document.getElementById('dim');

  if (event.target !== overlay && !event.target.closest('#overlay')) {
    overlay.style.visibility = 'hidden';
    dim.style.visibility = 'hidden';
  }
});

当点击它之外的东西时，隐藏一个绝对div

1 个答案: