jquery - 如何从fabricjs画布中删除事件监听器

Question

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

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

然后为了测试，我想在第一次鼠标悬停后通过调用：*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

使用 Angular 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”注册的事件，我正在这样做。我必须这样做，因为我必须在注册之前将一些参数绑定到我的侦听器，这会更改侦听器实例。在匿名函数的情况下，我们可以按照上面的逻辑。