Javascript 如何防止在追加子项时重复事件侦听器？

我一直在尝试创建一个场景，允许用户在单击“交换按钮”实体时在摄影机之间切换。我创建了一个较小的视图来显示设置。单击交换实体（此处为球体）将在旧的和新激活的摄影机实体之间移动光标。当它这样做时，它需要再次调用init处理程序。但是，我很难防止它在光标上造成事件侦听器的堆积如山

对于演示，print-oneter组件记录光标是否位于a-sphere/box/圆柱体/平面上。但是，通过单击球体进行的每一次额外的相机交换都会在鼠标事件之间产生额外的打印输出（之后您必须单击两次，大概是因为要交换的单击将被额外的单击撤消——但在此过程中，添加不同的偶数/奇数侦听器，使您能够真正交换下一个[设置]单击事件）。我尝试应用.removeEventListener，并将print Onner的函数处理程序移动到一个全局范围中，以便.removeEventListener可以看到它（因为我假设一个非处理程序被有效地视为唯一类型，因此不会被视为重复的侦听器并被忽略）

---

然而，同样的问题依然存在。任何帮助都将不胜感激。

请参阅对上述问题的评论中的ngokevin建议，以获得在不重新租用实体的情况下更好地处理此问题的方法

解决方法：您可以有两个游标enite，一个有游标，另一个没有游标。翻转时，在一个实体上删除一个光标的属性，在另一个实体上设置另一个光标的属性

---

如果只是重新租用

remove

处理程序，可能不会调用它？也许你必须完全分离它，然后重新连接它。目前还没有太多的事件或测试进行重新设置。我不知道这个框架，但是你确定这个删除函数在你的生命周期中被调用了吗？是否每次交换实体时都会在控制台上打印此消息“Deinitialized print Onener”？也许我不理解预期的行为，但是为什么不在添加新的侦听器之前删除旧的侦听器呢？@VictorLiaFook是的，删除当前被命中，消息被记录。遗憾的是，在addEventListener的行之前立即调用.removeEventListener并不能解决问题。@也许有更好的解决方案允许光标在我忽略的摄像机之间移动吗？当我测试它时，场景中有两个a光标似乎会引起问题——有没有一种等效的方法可以让a光标在摄影机旁边被禁用。激活？——谢谢你的回复！

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