Question

I need to create several Raphael objects in my program. field1 and field2 are div-elements. Each Raphael object (paper1,paper2,…) will have unique canvas and they all need to have exactly the same functionality. Raphael objects need to be created dynamically at later point. In the following examplecode I need to know which of the objects fires the mousedown event. I would also like to know in which div-element (field1/field2 here) is that mousedown event fired. How can I get the information?

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

Here you go:

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/