如何在两层画布的底部画布上注册click事件

Question

我正在开发一个游戏，其中包含多个画布。 一个用于地图，另一个用于用户界面，另一个用于游戏对象，等等。用户界面画布将是最上面的画布，但是我想知道是否要在地图层上注册一个click事件，如何我会在ui画布位于其他所有画布之上的情况下这样做吗？ 就目前而言，当我单击时，它只将单击注册在ui画布上，这是应该的，因为它位于其他画布之上。 如何在其他画布之一上注册点击？

的CSS

canvas{
    position: absolute;
}

#ui{
    bottom: 0;
    z-index: 5;
}

#basemap{
    z-index: 0;
}

的HTML

<canvas id="ui"></canvas>
<canvas id="basemap"></canvas>

JS

var canvases = document.getElementsByTagName("canvas");

for(var i = 0; i < canvases.length; i++){
    canvases[i].onclick = function(){
        console.log(this);
    }
}

钢笔

Answer 1

在#ui元素#ui pointer-events设置为none 。 这将导致与指针相关的事件被#ui忽略，并传递到基础元素：

#ui{
    bottom: 0;
    z-index: 5;
    pointer-events: none;
}

Answer 2

将pointer-events CSS属性在#ui元素上设置为none ，将禁用对其的单击。

#ui {
  bottom: 0;
  z-index: 5;
  pointer-events: none;
}

值none指示鼠标事件“遍历”该元素并以该元素“之下”的对象为目标。

指针事件信息

Answer 3

画布不提供UI，因此您不需要注册两个画布事件。 您将需要根据UI坐标和当前鼠标状态（拖动）检查click，mousedown，mouseup事件。 如果鼠标悬停在UI图形上，则可以处理UI要求，否则，可以满足游戏地图的需要。 由于两个画布的鼠标坐标都相同，因此没有必要添加额外的冗余事件侦听器，这只会使代码过于复杂。

此外，您不应在事件处理程序中对鼠标事件做出反应。 鼠标事件处理程序的触发频率比画布更新的触发频率高得多。 您应该使用事件处理程序来记录当前的鼠标状态（位置，按下按钮），并且在主游戏循环中可以处理鼠标交互。 这将减少每个鼠标事件需要运行的代码量，并大大简化了代码。

鼠标事件处理程序旨在简化与单个UI组件的交互，画布通过无法将UI /地图组件定义为带有事件的不同可注册项而打破了范例。 将画布当作DOM对待将不利于整体代码质量和游戏性能。