How to prevent duplicate event listeners upon appendChild?

Question

I've been trying to create a scene that allows a user to switch between cameras upon clicking a "swap button" entity. I created a smaller CodePen demo to present the setup. Clicking on the swap entity (the sphere, here) will move the cursor between the old and the newly activated camera entities. When it does this, it has to call the init handler again. However, I'm having difficulty preventing this from causing an dogpile of event listeners on the cursor.

For the demo, the print-onenter component logs whether the cursor's over the a-sphere/box/cylinder/plane. Yet every additional camera swap by clicking on the sphere results in an additional print-out between mouseenter events (and you have to click it twice after, presumably because the clicks to swap will be undone by the additional click--but in the process add a different even/odd amount of listeners enabling you to actually swap next [set of] click event). I tried to apply a .removeEventListener, and to move print-onenter's function handler into a global scope so .removeEventListener would see it (since I assume anon handlers are effectively treated as unique types and therefore not treated as a duplicate listener and ignored).

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

Nevertheless, the same problem persists. Any help would be greatly appreciated.

Maybe the remove handler isn't called if it's simply reparented? Maybe you have to fully detach it then reattach it. Currently don't have much events or tests doing re-parenting yet. — ngokevin
I dont know this framework but are you sure that this remove function is being called in your life cycle? Is this msg "Deinitialized print-onenter." printed on your console every time you swap entities? Maybe I didnt understand the expected behaviour, but why dont you simply remove the old listener before adding the new one? — Victor Lia Fook
@VictorLiaFook Yes, remove currently gets hit, the message gets logged. Calling .removeEventListener immediately prior to addEventListener's line doesn't resolve the problem, sadly. — Benjamin D. Gibson
@ngokevin Is there a better solution to allow a cursor to move between cameras I'm overlooking, perhaps? Having two a-cursors in the scene seemed to cause problems when I tested it--is there an equivalent way to let a-cursor be deactivated alongside camera.active? — Benjamin D. Gibson

Benjamin D. Gibson Benjamin D. Gibson · Accepted Answer · 2017-02-26T02:55:14

Please see ngokevin's suggestion in the comments to the question above for a better way to handle this without reparenting entities.

Workaround: You could have two cursor enitites, one that has the cursor and one that doesn't. When you flip, then removeAttribute one cursor on one entity, and setAttribute another cursor on the other.

How to prevent duplicate event listeners upon appendChild?

1 Answers