多個gui按鈕的問題

我正在用自定義GUI製作一個帶有html5畫布的繪圖應用程序。我有一個鼠標按下事件監聽器，當鼠標關閉時會調用一個函數。在這個函數中，我得到鼠標所在的x和y座標。我打算使用if語句來檢查用戶是否點擊了任何按鈕，但由於屏幕上有大約20個按鈕，因此這絕對不是最有效的檢查方式。我想爲每個按鈕製作一個按鈕類和對象，並將它們添加到數組中。但是這種方法需要大量的硬編碼，因爲每個按鈕都有獨特的功能和xy位置。多個gui按鈕的問題

這樣做的最好方法是什麼？我感謝任何幫助或建議！

來源

2016-03-27 Joseph Clark

爲什麼不給他們每人一個ID

<button id="b1">Button 1</button> 
<button id="b2">Button 2</button> 
<button id="b3">Button 3</button>

JS：

document.getElementById("b1").addEventListener("click", function(){ 
    //do something... 
}); 

document.getElementById("b2").addEventListener("click", function(){ 
    //do something else... 
});

來源

2016-03-27 21:21:37 Bxx

給每個按鈕的ID和使用CSS放置它們。
然後使用共享的處理程序，其可以在一個循環中最初結合：
var buttons = document.querySelectorAll("buttons"); // or query on parent element for(var i = 0; i < buttons.length; i++) buttons[i].addEventListener("click", handler);
在處理程序只需查看哪個按鈕被點擊，然後分配一個功能：
function handler() { switch(this.id) { // "this" will be the button that was clicked case "btnBrush" : return doSomething1(); case "btnEraser": return doSomething2(); ... } }

來源

2016-04-05 02:24:35 K3N

多個gui按鈕的問題

回答

相關問題