Question

我正在使用fabricjs在html5中构建交互式地图。

当DOM加载时，我通过调用：* my_event_setter（ true ）*将我的鼠标悬停监听器添加到我的fabricjs画布实例。

然后为了测试，我想通过调用以下方法删除侦听器：* my_event_setter（ false ）*。因此，应该删除鼠标悬停监听器，但它不会。

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

我通过使用：

解决了这个问题

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

事件在一个数组中，因此可以轻松处理这些事件。

Answer 2

此示例显示了在触发mouseup时如何删除mousemove：

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

Answer 3

销毁所有事件的最简单解决方案：

canvas.__eventListeners = {}

如果只想删除通过__eventListeners对象的属性进行迭代的某些事件，则：

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

或使用新的Object.keys：

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

Answer 4

使用角度js绑定事件，如

$scope.closeCurve = function(){
    canvas.isDrawingMode = true;
    canvas.on('mouse:up', function() {
      canvas.getObjects().forEach(o => {
        o.fill = 'blue'
      });
      canvas.renderAll();
    });
  };

删除

之类的活动

$scope.selectTool = function(){
    canvas.isDrawingMode = false;
    canvas.off('mouse:up');
  };

使用on方法绑定并从off方法中删除...：）

Answer 5

function removeEvent(eventName: string) {
  let lisnr = canvas.__eventListeners[eventName][0];
  canvas.off(eventName, lisnr);
}

我正在这样做，因为“eventName”只注册了一个事件。我必须这样做，因为我必须在注册之前将几个参数绑定到我的侦听器并更改侦听器实例。在匿名函数的情况下，我们可以按照上面的逻辑去。

如何从fabricjs canvas中删除事件侦听器

5 个答案: