Javascript Onclick und Methode

Question

Ich benutze SVG.JS Framework für JS, und ich möchte Methode für onclick Ereignis hinzufügen, für selectColor Element.

changeCircleColor: function() { 
    this.circleColor = prompt("choose color for your circle"); 
}, 
view: function() { 
    var view = SVG('viewCircle').size(300, 300).style({ 
    background: "black" 
    }); 

    var circle = view.circle(280).attr({ 
    fill: this.circleColor, 
    cx: "150", 
    cy: "150" 
    }); 
    var selectColor = view.rect(30, 30).attr({ 
    fill: "white", 
    x: "270", 
    y: "270", 
    stroke: "black", 
    onclick: "this.changeCircleColor()" 
    }) 
}, 

Aber Skript kann es nicht finden.

CircleEditor.html:1 Uncaught TypeError: this.changeCircleColor is not a function at SVGRectElement.onclick (CircleEditor.html:1)

Answer 1

UPDATE

Ihr Problem mit der Art und Weise starten Sie die Funktion Handler zu Ihrem SVG Element vorbei sind.

Sie verwenden einen Zeichensatz für die Methode attr().

Wenn Sie eine Zeichenfolge verwenden, sind Sie sehr eingeschränkt, was Sie tun können. Das ist ok für kleines Beispiel oder wenn Sie nur ein kleines Stück Code übergeben, normalerweise die ganze Funktion.

Natürlich sollte die Funktion isoliert und selbst ausführbar sein, ohne externe Abhängigkeit.

Aber für etwas mehr, sollten Sie die attr() und verwenden Sie die vorgeschlagene richtige Methode vermeiden Ereignisse auf svg.js zu binden:

element.on('click', function() { 
    // your code here. 
}); 

Sie können die Details in der Dokumentation Seite finden : http://svgjs.com/events/

Und jetzt über den diesen Inhalt, dass geändert wird, wenn das Klick Ereignis ausgelöst wird, so Sie zahlen sollen Aufmerksamkeit dieser Teil deines Codes.

Der richtige Weg, den Handler zu setzen, ist die folgende:

element.on('click', this.changeCircleColor); 

keinen String mögen, aber die Referenz auf die Funktion (eigentlich die Funktion Körper).

Sie werden also die Funktion Ihres aktuellen Objekts als Event-Handler des Svg-Elements zuweisen.

Wenn Sie das aktuelle Objekt in der Event-Handler-Funktion verwenden, sollten Sie auch die Funktion zu Ihrem Objekt binden:

element.on('click', this.changeCircleColor.bind(this));