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>

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

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

Answer 1

HTML 中的图像是 replaced element

如果您在开发者工具中检查 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 根据窗口的宽度和高度动态更改图像大小。这样，我什至不需要知道图像的尺寸。