CODEWITHSUNDEEP
javascriptfabricjsmousedown
Tor Klingberg
Tor Klingberg

Reputation: 5108

mouse:down vs. mousedown in fabric.js

Here is a fabric.js example with a canvas and a rectangle, with a mouse down handler on each:

var canvas = new fabric.Canvas('c');

var rect = new fabric.Rect({ 
  left: 100, 
  top: 100, 
  width: 50, 
  height: 50, 
  fill: '#faa', 
})

canvas.add(rect);

canvas.on('mouse:down', function(options) {
  console.log('canvas event');
});

rect.on('mousedown', function(options) {
  console.log('rect event');
});

Why does it need to be mouse:down on the canvas, but mousedown on the rectangle? If I change either, they stop working. Is the mousedown not actually a fabric event, and if so, should the handler function be different?

JsFiddle: http://jsfiddle.net/243kau3x/4/

Upvotes: 2

Views: 8926

Answers (1)

BKR
BKR

Reputation: 443

They are both fabric js events. The main difference is the type of instances to which the events are attached.
mouse:down is a event specific for the fabric Canvas instance while mousedown is specific to a fabric Object instance, in your case a rect.

There are different types of events that can be listened on a Canvas and on an Object instance. The full list of available events is available on fabric js official site.

The events specific to the Canvas instance are presented in detail on the library official GitHub page in this post.

Upvotes: 4

Related Questions