参考拉斐尔对象

Reference to Raphael object

本文关键字:对象 考拉 参考      更新时间:2023-09-26

我需要在我的程序中创建几个Raphael对象。 字段 1 和字段 2 是div 元素。每个Raphael对象(paper1,paper2,...)都有独特的画布,它们都需要具有完全相同的功能。Raphael 对象需要在以后动态创建。在下面的示例代码中,我需要知道哪个对象触发了 mousedown 事件。我还想知道在哪个div 元素(此处为 field1/field2)中触发了鼠标关闭事件。如何获取信息?

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) {
    });
});
}());
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 - 带有 ID 的div (字段 2/字段 1),其中包含单击的 SVG。

你来了:

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/