how to remove event listener from fabricjs canvas

Question

I am using fabricjs to build an interactive map in html5.

When the DOM loads, I add my mouseover listener to my fabricjs canvas instance by calling: *my_event_setter( true )*.

Then for the sake of testing, I want to remove the listener once I do my first mouseover by calling: *my_event_setter( false )*. That should thus remove the mouseover listener, but it does not.

my_event_setter = function( toggle )
  { var lvo =  { 'object:over' : function(e){ mouseover_handler( e ) } } ;
    toggle ? my_fabric_canvas.on( lvo ) : my_fabric_canvas.off( lvo ) ;
  } 
mouseover_handler = function( e )
  { my_event_setter( false ) ;
  } 

Answer 1

I solved this by using:

var canvas = fabric.Canvas.activeInstance;
canvas.__eventListeners["mouse:down"] = [];

The events are in an Array so it makes it easy to handle these.

Answer 2

This example shows how to remove the mousemove when mouseup is fired:

canvas.on('mouse:up', function () {
    canvas.off('mouse:move', eventHandler);
});

Answer 3

The simplest solution to destroy all the events:

canvas.__eventListeners = {}

If you want to remove only some of the events iterate through the properties of the __eventListeners object:

for (var prop in canvas.__eventListeners) {
    if (canvas.__eventListeners.hasOwnProperty(prop) && prop === 'mouse:up') {
        delete canvas.__eventListeners[prop]
    }
}

Or with new Object.keys:

Object.keys(canvas.__eventListeners).forEach((prop) => {
    if (prop === 'mouse:up' || prop === 'object:moving')) {
        delete canvas.__eventListeners[prop]
    }
})