如果我將影像添加到傳單地圖作為代碼的疊加
let newOverlay = L.imageOverlay(imageUrl, imageBounds).addTo(mapObj);
newOverlay.addEventListener('click', (e) => {
let thisImg = e.currentTarget;
console.log(thisImg);
});
我在地圖上看到我的影像，但是當我單擊它時，<canvas>單擊影像上方的元素z-index: 100并延伸到螢屏的整個寬度和高度。如果我添加z-index: 200到影像，它沒有幫助。
也許它比 Leaflet 和 JS 更像是 HTML/CSS 問題，但我不確定也無法解決。
uj5u.com熱心網友回復：
您需要設定 ImageOverlay interactive，然后它是可點擊的：
var newOverlay = L.imageOverlay(imageUrl, imageBounds, {interactive: true}).addTo(map);
uj5u.com熱心網友回復：
假設您不想對覆寫畫布的任何部分的點擊做出反應，您可以將其設定為 pointer-events: none
這是一個簡單的示例，其中頂部元素對單擊沒有反應：
.under,
.over {
width: 100vw;
height: 100vh;
position: absolute;
}
.under {
background-color: pink;
}
.over {
background-color: rgba(0, 0, 255, 0.5);
pointer-events: none;
}<div class="under" onclick="alert('under clicked');"></div>
<div class="over" onclick="alert('over clicked');"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/369263.html
標籤：javascript html css 传单
上一篇：React-匯入的物件陣列不反轉