如何点击容器内任意元素时隐藏整个容器？

问题出在内部的<ins>元素自带了onclick="hideGFeedback()"事件，这个函数大概率阻止了事件冒泡（比如调用了e.stopPropagation()或者return false），导致父容器ad-container的click监听器接收不到点击事件。以下是几种可行的解决办法：

方法一：开启事件捕获模式 #

给父容器的click事件监听添加第三个参数true，让事件在捕获阶段触发，这样即使内部元素阻止冒泡，父容器也能捕获到点击事件：

const ad = document.getElementById("ad-container");
ad.addEventListener('click', e => {
  console.log("test");
  ad.style.opacity = 0;
}, true); // 开启事件捕获

方法二：修改hideGFeedback函数 #

直接让hideGFeedback函数负责隐藏整个广告容器，这样点击<ins>元素时直接触发隐藏逻辑：

function hideGFeedback() {
  const ad = document.getElementById("ad-container");
  ad.style.opacity = 0;
}

同时保留父容器的click监听，这样点击容器空白区域也能触发隐藏。

方法三：移除内部元素的阻止冒泡逻辑 #

如果能修改hideGFeedback函数，检查里面是否有e.stopPropagation()或者return false的代码，把这些阻止冒泡的语句删掉，这样事件就能正常冒泡到父容器，原来的监听代码就能生效。

内容的提问来源于stack exchange，提问作者Matt Sapphire