參考Raphael物體

Question

我需要在我的程序中創建幾個Raphael物體。 field1和field2是div元素。每個Raphael對象（paper1，paper2，...）將具有獨特的畫布，並且它們都需要具有完全相同的功能。 Raphael對象需要在以後動態創建。在下面的示例代碼中，我需要知道哪些對象觸發了mousedown事件。我還想知道哪個div元素（field1/field2在這裏）是mousedown事件觸發的。我如何獲取信息？

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

在這裏你去：

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 - 矩形拉斐爾對象

this.node - 矩形SVG DOM元素

this.paper.canvas - svg dom元素

this.paper.canvas.parentNode - 包含被單擊的svg的id（field2/field1）的div。