Referenz auf Raphael-Objekt

Question

Ich muss mehrere Raphael-Objekte in meinem Programm erstellen. field1 und field2 sind div-Elemente. Jedes Raphael-Objekt (paper1, paper2, ...) wird eine einzigartige Leinwand haben und alle müssen dieselbe Funktionalität haben. Raphael-Objekte müssen zu einem späteren Zeitpunkt dynamisch erstellt werden. Im folgenden Beispielcode muss ich wissen, welches der Objekte das mousedown-Ereignis auslöst. Ich würde auch gerne wissen, in welchem ​​div-Element (field1/field2 here) das mousedown-Ereignis ausgelöst wird. Wie kann ich die Informationen erhalten?

var myProgram = (function() { 
var paper1 = Raphael("field1", 200, 400, fieldActions); 
var paper2 = Raphael("field2", 200, 400, fieldActions); 

var planeAttrs = { 
    fill: "#fff" 
}; 

function fieldActions(){ 
    var that = this; 

    that.field = that.rect(0, 0, 200, 400, 30); 

    that.field.attr(planeAttrs); 

    that.field.mousedown(function(e) { 
    }); 
}); 
}()); 

Answer 1

Hier gehen Sie:

that.field.mousedown(function(e) { 
    var target = e.target; 
    var svgElem = target.parentNode; 
    var div = svgElem.parentNode; 
    alert(div.id); 
}); 

http://jsfiddle.net/mihaifm/UyPn6/3/

Answer 2

that.field.mousedown(function(e) { 
console.log(this, this.node, this.paper.canvas, this.paper.canvas.parentNode) 
}); 

this - das rect raphael Objekt

this.node - das rect svg dom Element

this.paper.canvas - das SVG-DOM-Element

this.paper.canvas.parentNode - div mit id (field2/feld1), die die SVG enthält, die angeklickt wird.