FabricJS double click on objects

I'm using this workaround:

  var timer = 0;
  canvas.item(0).on('mouseup', function() {
    var d = new Date();
    timer = d.getTime();
  });
  canvas.item(0).on('mousedown', function() {
    var d = new Date();
    if ((d.getTime() - timer) < 300) {
      console.log('double click')
    }
  });

The Correct way to add custom events to Fabric.js

window.fabric.util.addListener(canvas.upperCanvasEl, 'dblclick', function (event, self) {
  yourFunction(event);
});

or use fabric.ext


The more elegant way is to override fabric.Canvas._initEventListeners to add the dblclick support

_initEventListeners: function() {
  var self = this;
  self.callSuper('_initEventListeners');

  addListener(self.upperCanvasEl, 'dblclick', self._onDoubleClick);
}
_onDoubleClick: function(e) {
  var self = this;

  var target = self.findTarget(e);
  self.fire('mouse:dblclick', {
    target: target,
    e: e
  });

  if (target && !self.isDrawingMode) {
    // To unify the behavior, the object's double click event does not fire on drawing mode.
    target.fire('object:dblclick', {
      e: e
    });
  }
}

I've also developed a library to implement more events missed in fabricjs : https://github.com/mazong1123/fabric.ext


This is similar to @LeoCreer's answer but actually gets access to the targeted object

fabric.util.addListener(canvas.upperCanvasEl, 'dblclick', function (e) {
  var target = canvas.findTarget(e);
});

Tags:

Fabricjs