javascript - 'stopPropagation' 是否应该阻止 Canvas 接收 Fabricjs 对象上的鼠标事件？

Question

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

我有一个 fabricjs Canvas 实例，它附加了一个鼠标 eventListener。我还有一堆带有鼠标事件监听器的对象。我不希望对象上的鼠标事件传递到 Canvas 。 stopPropagation 和/或 stopImmediatePropagation 不会停止事件。

我是不是用错了这些方法？或者是否有 Fabricjs 方法来处理这个问题？

---

包装Fabricjs Canvas 实例的类的方法

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 在他的评论中所说，在 Canvas 对象上不存在冒泡这样的事情。在 Konva.js 中，他们实际上在对象级别添加了自己的事件处理，其中冒泡的模拟方式与您在普通 DOM 中的预期完全相同(更多关于 Konva.js 文档中 Konva 的强大功能:https://konvajs.org/docs/events/Cancel_Propagation.html)。

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

主要问题是 Canvas 事件在对象事件之前触发，这意味着当您试图阻止对象的事件处理程序内部“冒泡”时，您为时已晚(从这个意义上说，它确实不是向 Canvas “冒泡” ).

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

希望对您有所帮助。如果还有其他(更好的解决方案)请评论。