javascript - Fabric.js 中的鼠标 :down vs. mousedown

Question

这是一个包含 Canvas 和矩形的 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');
});

为什么在 Canvas 上需要使用 mouse:down ，而在矩形上需要使用 mousedown ？如果我改变其中任何一个，他们就会停止工作。 mousedown 实际上不是一个结构事件吗？如果是，处理函数是否应该有所不同？

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

Answer 1

它们都是fabric js事件。主要区别在于事件所附加的实例类型。
mouse:down 是特定于 Fabric Canvas 实例的事件，而 mousedown 特定于 Fabric Object 实例(在您的情况下是一个 rect)。

可以在 Canvas 和 Object 实例上监听不同类型的事件。可用事件的完整列表可在 Fabric js 官方网站上找到。

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