object-fit:contain on child 防止父事件触发

Question

 let parent = document.getElementById("parent"); let img = document.getElementById("img"); parent.addEventListener("click", function() { parent.style.display = "none"; }); img.addEventListener("click", function(e) { e.stopPropagation(); })

 #parent { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: blue; } #img { width: 100%; height: 100%; object-fit: contain; }

 <div id="parent"> <img src="https://dummyimage.com/600x400/000/fff" id="img"> </div>

基本上，我想要实现的是一个覆盖整个 window 的弹出窗口，并具有一个居中的图像，该图像延伸到最大高度或宽度（取决于图像尺寸）并保持纵横比。完整的图像应该仍然可见。 当您单击剩余的可见父级蓝色背景时，父级和图像都应该消失。

父事件未触发。 但是如果我删除 CSS 代码，事件就会触发。 这里发生了什么？

Answer 1

HTML 中的图像是替换元素

如果您在开发人员工具中检查 img，您可能会发现图像元素本身覆盖了所有父元素（即width: 100%; height: 100%; ）。

屏幕上图像的表示由object-fit: contain; . 但这不会改变图像元素本身的尺寸。 如果我为图像元素添加黄色背景，您会看到。 这涵盖了所有的蓝色parent

 let parent = document.getElementById("parent"); let img = document.getElementById("img"); parent.addEventListener("click", function() { parent.style.display = "none"; }); img.addEventListener("click", function(e) { e.stopPropagation(); })

 #parent { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: blue; } #img { width: 100%; height: 100%; object-fit: contain; background: yellow; }

 <div id="parent"> <img src="https://dummyimage.com/600x400/000/fff" id="img"> </div>

您需要尝试一些不同的东西才能让您的代码按预期工作

编辑：更改了实现

图像大小为 500 x 500 的示例

 let parent = document.getElementById("parent"); let img = document.getElementById("img"); parent.addEventListener("click", function() { parent.style.display = "none"; }); img.addEventListener("click", function(e) { e.stopPropagation(); })

 #parent { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: blue; } #img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; max-height: 100%; margin: auto; }

 <div id="parent"> <img src="https://dummyimage.com/500x500/f0f/000" id="img"> </div>

图像大小为 1000 x 600 的示例

 let parent = document.getElementById("parent"); let img = document.getElementById("img"); parent.addEventListener("click", function() { parent.style.display = "none"; }); img.addEventListener("click", function(e) { e.stopPropagation(); })

 #parent { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: blue; } #img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; max-height: 100%; margin: auto; }

 <div id="parent"> <img src="https://dummyimage.com/1000x600/f0f/000" id="img"> </div>

图像大小为 600 x 1000 的示例

 let parent = document.getElementById("parent"); let img = document.getElementById("img"); parent.addEventListener("click", function() { parent.style.display = "none"; }); img.addEventListener("click", function(e) { e.stopPropagation(); })

 #parent { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: blue; } #img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; max-width: 100%; max-height: 100%; margin: auto; }

 <div id="parent"> <img src="https://dummyimage.com/600x1000/f0f/000" id="img"> </div>

Answer 2

孩子与父母重叠。 子元素占用全部可用空间，并完全覆盖其父元素。 所以父元素没有可点击的区域。

如果您调整子元素的高度和宽度，那么您可以实现这一点。

 let parent = document.getElementById("parent"); let img = document.getElementById("img"); parent.addEventListener("click", function() { parent.style.display = "none"; }); img.addEventListener("click", function(e) { e.stopPropagation(); })

 #parent { width: 100%; height: 100%; position:fixed; top: 0; left: 0; background-color: blue; display: flex; align-items: center; justify-content: center; } #img { overflow:hidden; }

 <div id="parent"> <img src="https://dummyimage.com/400x400/000/fff" id="img"> </div>

Answer 3

由于我找不到使用 CSS 的简单解决方案（考虑到问题并不复杂），我决定通过动态调整图像大小来使用 JavaScript 快速修复。

我把我的答案留给任何需要这个的人。 但我仍然希望为此提供 CSS 解决方案。

 let parent = document.getElementById("parent"); let img = document.getElementById("img"); parent.addEventListener("click", function() { parent.style.display = "none"; }); img.addEventListener("click", function(e) { e.stopPropagation(); }) function stretchImage(){ let w = this.innerWidth; let h = this.innerHeight; if(w < h){ img.style.width = "100%"; img.style.height = "auto"; }else{ img.style.width = "auto"; img.style.height = "100%"; } } window.onresize = stretchImage; window.onload = stretchImage;

 #parent { width: 100%; height: 100%; position: fixed; top: 0; left: 0; background-color: blue; display: flex; justify-content: center; align-items: center; }

 <div id="parent"> <img src="https://dummyimage.com/400x400/000/fff" id="img"> </div>

该脚本使用 onload 和 onresize 根据 window 的宽度和高度动态更改图像大小。 这样，我什至不需要知道图像的尺寸。