jQuery click元素及其背后的元素

Question

我有一个预测，我正在做一个游戏，将人们移动到一堆瓷砖上，这些瓷砖指示点击时的动作。问题是，我需要允许用户在用户的头像后面单击，以在用户周围单击时移动到其图片后面的图块。以下是游戏世界的示例...

堆积在可点击的img上方的tiles元素（由蓝色的环绕框勾勒出）依次阻止了点击房间中的化身的能力，并禁止大量移动给玩家。

调查此问题后，我发现了CSS标记：

.avatar {
    pointer-events: none;
}

这确实为我解决了单击头像的解决方案，尽管我需要.avatar元素才能点击才能使用游戏功能，但我现在可以单击玩家阻止的图块。基本上，我需要能够监视click事件，并且需要能够在实际头像后面监视click和hover。

我研究了map generators中的HTML5和JavaScript，尽管它们仍然使该元素存在于其中，但只允许某个区域变为可点击状态。

目前（启用pointer-events: none;），我的jQuery代码如下：

$(document).on('click', '.avatar', function(event){
  console.log('an avatar was clicked...');
});

简而言之，我想问这是否是单击两个对象的解决方案，而不必在这两个折衷之间进行选择。或剥离去掉图像的透明区域，以允许单击图像的其他区域（去除PNG的垃圾）。