Duplicated Events on duplicated elements with different z-indexes angular 3rd Party library

Question

I am using a 3rd Party library (angular-draggable-droppable) in an ionic on angular project. As ionic caches pages, the angular component stays in the Dom but with a lower z-index value. It seems that, when having the same page with different z-indexes, the onDrop event is triggered twice, one for each element, as they both are in the dom. My questions are:

1. Do I need to make sure that event-listeners are properly removed from the dom, when using a 3rd party library.
2. How do I do that (removing/disabling all event-listeners of a cached page) cleanly.
3. Is there any suggestions, to similar cases (I have a workaround, which I don't like, shortly having a flag (active) in the page, which I set to false in the hook IonicDidLeave and in every event-handler I check whether its active and then do the expected handling).
4. Do I need to find another library, that handles this scenario?.

Answer 1

Event handlers will be removed and cleaned up when the DOM element is garbage collected as part of the garbage collection process in modern browsers. In your case since ionic caches component instead of removing, you need to manually remove by removeListener method of javascript.