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 的寬度和高度動態更改圖像大小。 這樣，我什至不需要知道圖像的尺寸。