如何防止appendChild上的重複事件偵聽器？

我一直在試圖創建一個場景，允許用戶在單擊「交換按鈕」實體時在相機之間切換。我創建了一個較小的CodePen demo來呈現設置。點擊交換實體（這裏的球體）將會在舊的和新激活的攝像機實體之間移動光標。當它這樣做時，has再次調用init處理程序。但是，我很難避免這種情況導致遊標上的事件監聽器堆積如山。如何防止appendChild上的重複事件偵聽器？

對於演示，print-onenter組件記錄光標是否位於a-sphere/box/cylinder/plane之上。然而，通過單擊球體來交換每個附加攝像頭會導致鼠標和鼠標事件之間的額外打印輸出（並且必須在兩次之後單擊它，大概是因爲交換的點擊將被額外的點擊取消 - 但在此過程中添加一個不同的偶數/奇數的聽衆，使你可以實際交換下一組[點擊事件]）。我嘗試應用.removeEventListener，並將print-onenter的函數處理程序移到全局作用域中，因此.removeEventListener會看到它（因爲我假設anon處理程序被有效地視爲唯一類型，因此而不是被視爲重複的偵聽程序並被忽略）。

function listenerTest (event) { 
    console.log("Object Entered: " + event.detail.intersectedEl.nodeName); 
}; 

AFRAME.registerComponent('print-onenter', { 
    init: function() { 
    console.log('Reinitialized print-onenter.'); 
    this.el.addEventListener('mouseenter', listenerTest); 
    }, 
    remove: function() { 
    console.log('Deinitialized print-onenter.'); 
    this.el.removeEventListener('mouseenter', listenerTest); 
    } 
});

儘管如此，同樣的問題仍然存在。任何幫助將不勝感激。

來源

2017-02-25 Benjamin D. Gibson

也許'remove'處理程序不被調用，如果它只是reparented？也許你必須完全分離它然後重新附加它。目前沒有太多的事件或測試做重新養育。 – ngokevin

我不知道這個框架，但你確定這個刪除功能正在你的生命週期中被稱爲？這是味精「未初始化的打印輸入。」每次交換實體時在您的控制檯上打印？也許我不明白預期的行爲，但爲什麼不在添加新的偵聽器之前先刪除舊的偵聽器？ –

@VictorLiaFook是的，當前刪除被擊中，消息被記錄。可悲的是，在addEventListener的行之前立即調用.removeEventListener並不能解決問題。 –