如何从fabricjs画布中删除事件监听器答案

【问题标题】：how to remove event listener from fabricjs canvas如何从fabricjs画布中删除事件监听器
【发布时间】：2013-09-15 05:36:44
【问题描述】：

我正在使用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 ) ;
  }

【问题讨论】：

好收获。 .off 当前不支持对象表示法（如 on 支持）但可能应该支持。请file a bug on github
与此同时，清除听众的适当方法是什么……………………………… jQuery("#my_canvas_element" ).off('object:over' ...)?? .... .. .. ... .. .. ... ... ... ... ... ... ... ... jQuery(my_fabric_canvas).off('object:over ' ... )??
my_fabric_canvas.off('object:over', eventHandler)（确保 eventHandler 是原始参考）
kangax ...这似乎正在工作...所以，就stackoverflow而言，这就是答案...提示，提示:)
我把issue提交到github了。

标签： jquery fabricjs

【解决方案1】：

我通过以下方式解决了这个问题：

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

事件在一个数组中，因此很容易处理这些事件。

【讨论】：

要重置fabric js中的所有canvas enent，我们需要使用canvas.__eventListeners = { };

【解决方案2】：

这个例子展示了如何在 mouseup 被触发时移除 mousemove：

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

【讨论】：

【解决方案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]
    }
})

【讨论】：

canvas.__eventListeners 未定义。
@SteveOwens 你使用的是什么版本的 FabricJS？ canvas 元素需要是一个 Fabric 类。 var canvas = new fabrics.Canvas()

【解决方案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 方法中删除...:)

【讨论】：

【解决方案5】：

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

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

【讨论】：