Question

我一直试图创建一个场景，允许用户在点击＆＃34;交换按钮＆＃34;实体。我创建了一个较小的CodePen demo来呈现设置。单击交换实体（此处为球体）将在旧的和新激活的相机实体之间移动光标。当它执行此操作时，它has再次调用init处理程序。但是，我很难阻止它在光标上造成一堆事件监听器。

对于演示，print-onenter组件记录光标是否在a-sphere / box / cylinder / plane上。然而，通过点击球体每次额外的相机交换都会导致鼠标中心事件之间的额外打印输出（之后你必须再点击两次，大概是因为交换的点击将被额外的点击撤消 - 但在此过程中添加一个不同的偶数/奇数量的侦听器，使您能够实际交换下一个[set of] click事件）。我尝试应用.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 );
  }
} );

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

Answer 1

请参阅上述问题评论中的ngokevin建议，以便在没有重新实体的情况下更好地处理此问题。

解决方法：您可以使用两个光标，一个具有光标，另一个不具有光标。当你翻转时，然后在一个实体上删除一个游标，并在另一个实体上设置另一个游标。

如何防止appendChild上的重复事件监听器？

1 个答案: