'stopPropagation'应该阻止画布在 Fabricjs 对象上接收鼠标事件吗？

Question

这是一个非常简单的问题，但我似乎找不到答案。

我有一个附加了鼠标事件侦听器的fabricjs画布实例。我还有一堆带有鼠标事件侦听器的对象。我不希望对象上的鼠标事件传递到画布。stopPropagation和/或stopImmediatePropagation不会阻止事件。

我使用这些方法错了吗？还是有Fabricjs的方法来解决这个问题？

---

包装Fabricjs画布实例的类上的方法

this.canvas.on("mouse:down", this.handleMouseDown);

---

Fabricjs子类的方法：

testMouseDownHandler: function (event) {            
event.e.stopPropagation();
event.e.stopImmediatePropagation();
event.e.preventDefault();
if (event.e.shiftKey) {
this.canvas.setActiveObject(this);
}
},

Answer 1

正如@traktor53在他的评论中所说，画布对象上没有冒泡这样的事情。在 Konva 中.js他们实际上在对象级别添加了自己的事件处理，其中冒泡的模拟与您在普通 DOM 中期望的完全一样(更多关于 Konva 的强大功能，请参见 Konva 文档.js在这里：https://konvajs.org/docs/events/Cancel_Propagation.html(。

据我所知，它不适用于 Fabric.js，但这并不意味着您无法在单击对象时阻止画布的事件处理程序的执行。

主要问题是 canvas 事件在对象事件之前触发，这意味着当您尝试防止对象的事件处理程序内"冒泡"时，您为时已晚(从这个意义上说，它确实没有"冒泡"向画布(。

我只是通过忽略所有有目标的画布事件来防止画布事件执行，这意味着它只会在我们只单击画布时运行：

canvas.on('mouse:down', (event) => {
if(event.target !== null){
//Ignore this event, we are clicking on an object (event.target is clicked object)
return;
}
//... your canvas event handling code...
}
object.on('mousedown', (event) => {
//... your object event handling code...
let object = event.target;
}

在文档中查找所有其他事件名称：http://fabricjs.com/events

希望这是有帮助的。如果有其他(更好的解决方案(，请发表评论。