Question

这是一个带有画布和矩形的fabric.js示例，每个都有一个鼠标按下处理程序：

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');
});

为什么它必须在画布上为mouse:down，而在矩形上为mousedown？如果我改变了，他们就会停止工作。 mousedown实际上不是一个结构事件，如果是，那么处理函数应该是不同的吗？

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

Answer 1

它们都是结构js事件。主要区别在于事件所附加的实例类型 mouse:down是特定于结构Canvas实例的事件，而mousedown特定于结构对象实例，在您的情况下是rect。

可以在Canvas和Object实例上侦听不同类型的事件。有关可用事件的完整列表，请访问fabric js官方网站。

特定于Canvas实例的事件在此post的库官方GitHub页面上详细介绍。

鼠标：在fabric.js中向下与mousedown

1 个答案: