如何在兩層畫布的底部畫布上注冊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對待將不利於整體代碼質量和游戲性能。