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); 

如果深入到實體類的事件偵聽器中，可以看到重複。

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

完整的例子是關於下面的jsFiddle，雙擊該圓上有一個副本。我錯誤地定義在這裏我的事件偵聽器 http://jsfiddle.net/qQEj7/

是誰？使用KineticJS時有沒有不同的方式來做到這一點？

Answer 1

也就是說奇怪的行爲。我看着它一段時間，但無法答覆上來，爲什麼clone()被複制的事件偵聽器。它看起來像因爲這樣你的結構Kinetic.Entity，每次你clone()你的實體，它會克隆像正常的節點，也再次添加您的定義eventListeners（這是不需要的）。

也許會發生這種情況，因爲當您的實體節點clone()，它克隆eventListeners，但也調用您的_initEntity函數，它再次綁定eventListeners？

如果你經常打電話Kinetic.Shapeclone()不會發生問題。這告訴我它可能有事情做就在你Kinetic.Entity它是如何與clone()方法起着沿定義事件監聽器的方式。

在您的評論上面，你提到你嘗試：

this.off('mouseover mouseout dblclick');

嗯，這爲我工作，但它會從原來的節點中刪除事件監聽器（你雙擊了）。這取決於當你叫上面的線，但：

1. 如果您複製節點之前移除事件偵聽器，則新節點將仍然有原來的事件監聽器+的clone()似乎添加一組事件偵聽器的你定義的，因此你將最終套，我們不希望事件監聽器的。
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刪除您的事件監聽器（未這 - ！你點擊節點），這樣，原來的節點保持它的事件監聽器，並且新節點刪除所有被複制和複製的eventListener。從複製節點刪除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')之類的東西更容易管理。試想一下，如果你添加了一個新的事件監聽器，如mousedown，那麼你還必須編輯你的off函數爲.off('mouseover mouseout dblclick mousedown')，並且每隔一次添加另一個事件！