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

Question

我有一个父 DIV 的位置：固定；和不透明度：0.7；在其中我有一个带有背景颜色的子 DIV：白色；

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

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

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

Answer 1

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

在您的父级上，您将听到点击，检查被点击的元素是否正是父级而不是其子级之一，然后将其隐藏。我会将此行为应用于一个类，因此您只需在父元素上添加该类或调整代码以满足您的需要：

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，然后在某处加载此 sn-p，您就完成了。想法很简单：如果目标点击正是“.hide-on-click-exact”元素，则隐藏它。

注意：注意，不要在 this sn-p 的 eventListener 回调中使用箭头函数，因为箭头函数没有作用域，“this”将不再是被点击的元素，而是窗口。