Question

我有一个我正在研究的游戏，它将有多个画布。一个用于地图，另一个用于用户界面，另一个用于游戏对象等。用户界面画布将是最顶级的画布，但我想知道，如果我想在地图层上注册点击事件，如何如果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);
    }
}

Pen

Answer 1

在none元素上将pointer-events设置为#ui。这将导致#ui忽略与指针相关的事件并传递给底层元素：

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

Answer 2

将pointer-events CSS属性设置为none元素上的#ui，它将禁用点击它。

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

值none指示鼠标事件“遍历”该元素并将目标设置为“在该元素下面”。

Pointers event information

Answer 3

画布不提供UI，因此您无需注册两个画布事件。您将需要针对UI坐标和当前鼠标状态（拖动）检查click，mousedown，mouseup事件。如果鼠标位于UI图形上，则可以处理UI要求，如果不是，则可以处理游戏地图的需求。由于两个画布的鼠标坐标都是相同的，因此添加额外的冗余事件监听器是没有意义的，它只会使代码过于复杂。

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

鼠标事件处理程序旨在简化与各个UI组件的交互，画布通过无法将UI / map组件定义为具有事件的不同可注册项来打破范例。将画布视为DOM就像对整体代码质量和游戏性能一样不利。

如何在两个分层画布的底部画布上注册单击事件

3 个答案: