Проблема с несколькими кнопками gui

Question

Я создаю приложение для рисования с холстом html5 с пользовательским графическим интерфейсом. У меня есть прослушиватель событий мыши вниз, и функция вызывается, когда мышь не работает. В этой функции я получаю координаты x и y, где находится мышь. Я планировал использовать инструкцию if, чтобы проверить, нажал ли пользователь любую кнопку, но так как на экране есть около 20 кнопок, это определенно не самый эффективный способ проверки. Я думал о создании кнопки и объекта для каждой кнопки и добавления их в массив. Однако для этого подхода требуется много жесткого кодирования, поскольку каждая кнопка имеет уникальную функцию и позицию x y.

Каков наилучший способ обойти это? Я ценю любую помощь или совет!

Answer 1

Почему бы не дать им каждый идентификатор

<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

• Дайте каждой кнопке идентификатор и позиционируют их с помощью 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(); ... } }