Snap.svg

Question

我有一个对象，其中 3 个元素绑定在一个组中，我需要在单击绿色矩形时删除该对象（或至少它的图形表示 — 组）。 a.click() 有效，但 c.click() 无效，我想知道为什么：

var s = Snap(500, 500);

function myObj() {

    this.g = s.group();

    this.drawIt = function() {

    var a = s.rect(0, 0, 50, 50, 0, 0).attr({'fill':'#E82941'}),
        b = s.rect(20, 20, 50, 50, 0, 0).attr({'fill':'#FF6E00'}),
        c = s.rect(40, 40, 50, 50, 0, 0).attr({'fill':'#00C049'});

        this.g.append(a, b, c);

        a.click(function(e){this.attr({'fill':'#000'});});
        c.click(this.killIt);
    }

    this.killIt = function() {
        this.g.remove();    
    }

}

var obj = new myObj();

obj.drawIt();

Snap.svg 0.3.0。

…

已解决：http://codepen.io/GeMir/pen/KwbBqV

Answer 1

是闭包的问题，c.click处理函数里面的this不代表myObj。

在构造函数中声明一个变量 var that=this; myObj 如下所示

function myObj() {

  var that = this;

  this.g = s.group();

  this.drawIt = function() {
    var a = s.rect(0, 0, 50, 50, 0, 0).attr({'fill':'#E82941'}),
        b = s.rect(20, 20, 50, 50, 0, 0).attr({'fill':'#FF6E00'}),
        c = s.rect(40, 40, 50, 50, 0, 0).attr({'fill':'#00C049'});

        this.g.append(a, b, c);

        a.click(function(e){this.attr({'fill':'#000'});});
        c.click(function(e){that.killIt()});
  }

  this.killIt = function() {
            this.g.remove();    
  }

}

var obj = new myObj();

obj.drawIt();

如果在另一个函数中声明一个函数，this变量将与父函数的变量不同。在这种情况下，它将指向 c 对象，在 a.click 的情况下，由于 this 指向 a，它起作用了。

Snap.svg — 当其中一个元素被点击时删除一个对象

Snap.svg — remove an object when one of the elements was clicked

javascript

svg