KineticJS：克隆重复类自定义事件

Question

我在 KineticJS 类的构造函数中创建了一些自定义事件

    this.on('mouseover', this.mouseOver);
    this.on('mouseout', this.mouseOut);
    this.on('dblclick', this.dblclick);

当我克隆这个类时，我最终会复制这些事件侦听器。

    var copy = this.clone();
    this.parent.add(copy);
    console.log(this);
    console.log(copy);

如果您深入到我的 Entity 类上的事件侦听器，您可以看到重复。

eventListeners: Object
  dblclick: Array[2]
  mouseout: Array[2]
  mouseover: Array[2]

完整示例在以下 jsFiddle 上，双击圆圈进行复制。 http://jsfiddle.net/qQEj7/

我在这里错误地定义了我的事件侦听器吗？ 使用 KineticJS 时有没有不同的方法来做到这一点？

Answer 1

这是奇怪的行为.. 我看了一会儿，但无法想出为什么clone()复制您的事件侦听器的答案。 看起来由于您构建Kinetic.Entity的方式，每次您clone()实体时，它都会Kinetic.Entity克隆节点，但还要再次添加您定义的eventListeners （这是不希望的）。

也许发生这种情况是因为当您clone() Entity 节点时，它会克隆 eventListeners，但还会调用您的_initEntity函数再次绑定 eventListeners ？

如果您在常规Kinetic.Shape上调用clone() ，则不会发生此问题。 这告诉我它可能有事情做与你定义在你的事件监听器的方式Kinetic.Entity它如何与一起玩clone()方法。

在上面的评论中，您提到您尝试过：

this.off('mouseover mouseout dblclick');

嗯，这对我有用，但它会从原始节点（您双击）中删除 eventListeners。 这取决于您何时调用上面的行：

1. 如果您在删除 eventListeners之前复制了节点，那么新节点仍将具有原始 eventListeners + clone()似乎添加了一组您定义的 eventListeners，因此您最终会得到2组我们没有的 eventListeners不想。
2. 如果在删除 eventListeners后复制节点，那么原始节点将丢失它的 eventListeners，然后新节点将没有 eventListeners 开始，但是clone()方法添加了一组 eventListeners。

无论如何，我确实找到了一种有效的方法，因此希望它对您有用。 我创建了一个新方法来添加您的事件：

_bindEvents: function() {
    this.on('mouseover.entity', this.mouseOver);
    this.on('mouseout.entity', this.mouseOut);
    this.on('dblclick.entity', this.dblclick);
},

我在你的_initEntity函数中调用它。

然后，您双击事件，您可以通过调用删除你的事件监听器off的拷贝节点（不！这-点你点击）上，这样，原来的节点保持它的事件监听器，并且新节点将删除被复制和所有的事件监听器重复。 从复制的节点中删除 eventsListeners 后，您可以调用_bindEvents将事件绑定回原位：

dblclick: function () {
    var copy = this.clone();
    copy.off('.entity');
    copy._bindEvents();
    this.parent.add(copy);
    console.log(this);
    console.log(copy);
}

这是JSFiddle 。

提示：请注意，我将您的事件命名为mouseover.entity 、 mouseout.entity 、 dblclick.entity 。 这是因为 KineticJS 允许您命名事件以将它们组合在一起。 将这些事件命名为.entity允许我通过调用.off('.entity')一次性删除它们。 与调用.off('mouseover mouseout dblclick')类的方法相比，这使事情更简洁、更具可扩展性且更易于管理。 试想一下，如果您添加了一个新的 eventListener 像mousedown ，您还必须将off函数编辑为.off('mouseover mouseout dblclick mousedown') ，并且每隔一次添加另一个事件！