DIV内的纯色DIV不透明； ONCLICK事件问题

Question

我有一个位置固定的父级DIV：和不透明度：0.7；在里面，我有一个儿童DIV，背景颜色为：白色；

我如何使用ONCLICK事件，该事件使仅在您看到的黑色空间上单击时父DIV和子DIV都消失了？

由于白色DIV嵌套在具有不透明性的父DIV中，所以每当我单击白色DIV时，整个父DIV（黑色不透明DIV）都会消失...

单击黑色不透明度时，我需要两个DIV消失...单击白色DIV时，不需要...

Answer 1

当我创建一个灯箱（模态）并且只想使用2个元素时，我遇到了类似的问题：叠加层和内容（白框）。与您的结构相同。所以，这是您可以做的：

在您的父级上，您将收听点击，检查clicked元素是否完全是父级而不是其子级之一，然后将其隐藏。我将这种行为应用于一个类，因此您只需在父元素上添加该类或调整代码即可满足您的需求：

document.querySelectorAll('.hide-on-click-exact').forEach(function(el) {
    el.addEventListener('click', function(e) {
      if (e.target === this) {
        el.style.display = 'none';
      }
    });
});

因此，只需将类“ hide-on-click-exact”添加到您的父div，然后将该代码段加载到某个位置，即可完成操作。想法很简单：如果目标点击恰好是“ .hide-on-click-exact”元素，请将其隐藏。

注意：注意，请不要在此代码段的eventListener回调上使用箭头函数，因为箭头函数没有作用域，所以“ this”将不再是单击的元素，而是窗口。