img in canvas "klickbar" machen

[znieh99]

Hallo Forum,
ich möchte mehrere img in einer canvas anzeigen und bei einen klick auf eines dieser img dieses mit $(".symbol").click identifizierbar machen. Das funktioniert aber nicht, da das Ereignis scheinbar nicht auslöst. Ist diese Vorgangsweise nicht möglich? oder mache ich es nicht richtig?
Hier mein Code-Beispiel:

Code: Alles auswählen

$(document).ready( function() {

   var canv = document.getElementById("laufLeiste").getContext("2d");
 
   canv.drawImage(document.getElementsByClassName("symbol")[0], 0, 0, 50, 50);

   $(".symbol").click(function(e) {
    alert("Ok");
  })
    
})

[wegus]

So sollte es klappen:

Code: Alles auswählen

$("#symbol").click(function(e) {
    alert("Ok");
  });

Also # statt des Punktes und vor allem Semikolon am Ende des Statements. Tipp: Teste so etwas immer mit der Webkonsole an (F12 bei Chrome und Firefox).

[znieh99]

Hallo wegus,
auch das "#symbol" funktioniert nicht, was aber klar ist da es mehrere img gibt und diese im HTML mit "class="symbol" definiert sind.
Ist es möglich, dass das img in der canvas seine Object-Eigenschaft verliert?
lg heinz

[wegus]

ach so! Du hattest "einzelnes IMG" geschrieben...

bei einer ID muß eine Raute vorgestellt werden, bei einer CSS-Klasse ist der Punkt die richtige Lösung. Dann war mein Einwand falsch!

Allerdings: Fehlt da eben ein Semikolon am Ende und das wird der Fehler sein. Wenn solche Fehler im Javascript sind, dann arbeiten die Eventhandler eben nicht so wie gewünscht. Beherzige meinen Tipp mit der Webkonsole, da siehst Du Javascriptfehler!

[znieh99]

Habe das Semikolon natürlich bereits eingefügt, hat aber keine Auswirkungen.

Was meinst du mit der "Webkonsole"? Ich finde die in meinem NB IDE 8.0.2 nicht.
lg heinz

[znieh99]

Ok, Konsole im Browser gefunden. 0 Fehler.

Ich glaube immer noch, dass das Object (img) durch das canv.drawImage() seine Object-Eigenschaft verliert.
lg heinz

[wegus]

dann probier doch mal eine javascript id für ein img und teste mal den Einzelfall!

[znieh99]

habe ich schon probiert. Bringt das gleiche Ergebnis - nämlich kein click-Ereignis.
Sobald das Img in eine canvas gezeichnet wird ist es nicht mehr ereignisfähig.
lg heinz

[wegus]

Ich habe nochmal nachgelesen und in der Tat ist alles was man in einen Canvas zeichnet nicht mehr mit Events belegbar, also auch Dein Image nicht!
Hier wird eine Lösung über ein DIV um das Canvas herum beschrieben, bei der die IMG dann eben im DIV und nicht im Canvas abgelegt werden:

http://stackoverflow.com/questions/1117 ... lick-event

[znieh99]

Danke wegus. Damit ist die Frage erledigt,
lg heinz