1

我在 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 时有不同的方法吗？

4

1 回答 1

1

那是奇怪的行为。我看了一会儿，但无法回答为什么clone()要复制您的事件侦听器。看起来是因为你构建你的实体的方式Kinetic.Entity，每次你clone()的实体，它都会像正常一样克隆节点，但也再次添加你定义的eventListeners（这是不希望的）。

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

如果您clone()定期致电，则Kinetic.Shape不会发生此问题。这告诉我它可能与您在其中定义 eventListeners 的方式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- 您单击的节点！）来删除您的 eventListeners ，这样原始节点会保留它的 eventListeners，并且新节点会删除所有被复制和复制的 eventListeners . 从复制的节点中删除 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')，并且每隔一次添加另一个事件！

于 2013-07-15T19:30:50.970 回答