Wie ruft man eine Funktion bei einem Klick auf eine Komponente auf?

Question

function component(width, height, source, x, y) { 
    this.image = new Image(); 
    this.image.src = source; 
    this.width = width; 
    this.height = height; 
    this.x = x; 
    this.y = y;  
    this.update = function() { 
     ctx = myGameArea.context; 
     ctx.drawImage(this.image, 
      this.x, 
      this.y, 
      this.width, this.height); 
    } 
    this.newPos = function(a, b, image, h) { 
     this.x = a; 
     this.y = b; 
     this.image.src = image; 
     this.height = h; 
    } 
} 

Wie rufe ich eine Funktion auf, wenn ein Klick auf die Komponente ausgeführt wird? Oder sollte ich einfach die Koordinaten des Klicks aufzeichnen und sie mit denen der Komponente vergleichen?

Answer 1

Beim Arbeiten mit HTML5 Canvas gibt es leider keine einzelnen Knoten, auf denen Sie ein Klickereignis registrieren können. Ihre einzige echte Option ist hier, ein Klick-Ereignis auf dem Element <canvas> selbst zu registrieren und dann die X- und Y-Koordinaten zu verwenden, um herauszufinden, auf welche Komponente geklickt wurde.

Answer 2

Ich weiß nicht, ob Sie Vanilla JS oder eine spezielle Engine verwenden, aber wenn Sie JQuery verwenden können, müssen Sie vielleicht diese https://api.jquery.com/click/ betrachten, ermöglicht es Ihnen, eine Funktion bei jedem Klicken auf Ihre Komponente Der Code auszuführen Im Folgenden finden Sie nur ein Beispiel, wie die Funktion verwendet werden könnte. Testen Sie sie, um sicherzustellen, dass dies für Sie funktioniert.