忽略点击图片的透明部分

Question

我正在开发一款游戏。为此，我有几张图像（图块）相互重叠，以便获得透视。问题是当我尝试单击其中一个图块时。由于它们是重叠的，当单击一个时，它是另一个接收事件的图像。如何忽略对图像透明部分的点击？

Answer 1

这是我尝试使用地图重新创建的内容。

1. 将一张图片叠加在另一张图片上，为它们提供了类似的标识符
2. 您会注意到，如果您单击图像的下半部分，它不会触发事件，因为它的地图占据了图像的顶部。
3. 所以我们在地图区域创建了一个事件
4. 然后创建了一个无限循环，如果元素具有我们想要的 id，则运行该循环以匹配，如果它有，那么我们已经运行了一些代码。

var spool = document.querySelectorAll('.clicked');

spool.forEach(item => {
  item.addEventListener('click', event => {
   alert(event.currentTarget.getAttribute('alt'));
  })
});




var mapo = document.querySelector('.map');

mapo.addEventListener('click', event => {


var searching = event.target.parentNode;
   while (true) {

    if (searching.id == 'trigerme') {
    alert(searching.getAttribute('alt'));
        break;
    } 
searching= searching.previousSibling;
    
  
}
   
   

  })

<img src="https://www.w3schools.com/html/workplace.jpg" alt="something else yes"  width="400" height="379" class='clicked' id="trigerme">

<img src="https://www.w3schools.com/html/frenchfood3.jpg" alt="something else no" style="position:relative; margin-top:-379px;" usemap="#workmap" width="400" height="379" class='clicked' >


<map name="workmap" class="map">
  <area shape="rect" style="background-color:red;" coords="34,44,270,350" alt="Computer" >

</map>