Problem mit mehreren GUI-Schaltflächen

Question

Ich mache eine Zeichnungsanwendung mit dem HTML5 Canvas mit einer benutzerdefinierten GUI. Ich habe einen Ereignis-Listener mit der Maustaste los und eine Funktion wird aufgerufen, wenn die Maus nicht erreichbar ist. In dieser Funktion erhalte ich die x- und y-Koordinaten des Mauszeigers. Ich plante, mit und wenn Anweisung zu überprüfen, ob der Benutzer auf eine Schaltfläche klickt, aber da es etwa 20 Schaltflächen auf dem Bildschirm gibt, ist dies definitiv nicht die effektivste Möglichkeit der Überprüfung. Ich dachte darüber nach, für jede Schaltfläche eine Schaltflächenklasse und ein Objekt zu erstellen und sie zu einem Array hinzuzufügen. Dieser Ansatz erfordert jedoch viel Hardcoding, da jede Schaltfläche eine eindeutige Funktion und x y -Position hat.

Was ist der beste Weg, um dies zu tun? Ich freue mich über jede Hilfe oder Beratung!

Answer 1

Warum geben sie nicht jeweils eine 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

• jeder Taste eine ID geben und positionieren sie mit CSS.

• Dann einen gemeinsamen Handler verwenden, die Sie zunächst in einer Schleife binden kann:
  var buttons = document.querySelectorAll("buttons"); // or query on parent element for(var i = 0; i < buttons.length; i++) buttons[i].addEventListener("click", handler);

• in dem Handler einfach überprüfen, welche Schaltfläche geklickt wurde, weisen Sie eine Funktion:
  function handler() { switch(this.id) { // "this" will be the button that was clicked case "btnBrush" : return doSomething1(); case "btnEraser": return doSomething2(); ... } }