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

Question

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

我有一个附带鼠标eventListener的fabricjs画布实例。我还有一堆带有鼠标eventListeners的对象。我不希望对象上的鼠标事件传递到画布。 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.js文档中Konva的一个重要特性：https://konvajs.org/docs/events/Cancel_Propagation.html）。

据我所知，它不像Fabric.js那样工作，但这并不意味着你不能阻止在点击一个对象时执行画布的事件处理程序。

主要问题是canvas事件在对象事件之前触发，这意味着当你试图阻止在对象的事件处理程序中“冒泡”时你已经太晚了（在这种意义上它确实没有“冒泡”到画布）。

我通过忽略具有目标的所有画布事件来阻止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

希望这是有帮助的。如果还有其他（更好的解决方案）请评论。