複数のGUIボタンの問題

Question

カスタムGUIを使用してhtml5キャンバスを使用して描画アプリケーションを作成しています。マウスダウンイベントリスナーがあり、マウスが停止しているときに関数が呼び出されます。この関数では、マウスのx座標とy座標を取得します。私はif文を使用して、ユーザーがボタンをクリックしているかどうかを確認する予定でしたが、画面に約20のボタンがあるので、これは確かに最も効果的なチェック方法ではありません。私は各ボタンのボタンクラスとオブジェクトを作成して配列に追加することを考えました。しかし、この方法では、各ボタンに固有の関数とxyの位置があるため、ハードコーディングが多く必要になります。

これについてはどのような方法がありますか？私は助けや助言を感謝します！

Answer 1

なぜ彼らに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... 
}); 

Answer 2

• 各ボタンに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(); ... } }

次にあなたがループの中で最初にバインドすることができ、共有ハンドラを使用