“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);
        }
    },

- spring

---

事件监听器的添加顺序是什么？如果它们都被添加到画布对象中，则将按照添加的顺序执行它们。 - traktor

@traktor53 - 画布只有一个事件监听器。每个对象都有一个事件监听器。我没有看到任何涉及顺序的问题。问题在于我不希望对象上的点击事件被传递（冒泡）到画布上。 - spring

不太确定您的意思。Canvas元素不能有子元素，因此在DOM事件处理中没有任何内容会冒泡到Canvas上。为了让fabric.js处理画布上的小部件，它必须监听画布对象上的鼠标事件。 - traktor

嘿 @NoGrabbing，有趣的问题，你能创建一个代码片段来重现这个问题吗？ - Helder Sepulveda

我尝试了event.e.stopPropagation();并且取得了成功。所以在Angular组件和fabric Canvas的混合环境中，它对我起作用了。 - otembajelle

Answer 1

正如@traktor53在评论中所说，画布对象上不存在冒泡。在Konva.js中，他们实际上在对象级别上添加了自己的事件处理，其中模拟了冒泡，就像您在普通DOM中所期望的那样（有关Konva.js文档中这个伟大功能的更多信息，请参见此处：https://konvajs.org/docs/events/Cancel_Propagation.html）。

据我所知，Fabric.js的工作方式并不是这样的，但这并不意味着您不能在单击对象时防止执行画布事件处理程序。

主要问题是画布事件在对象事件之前触发，这意味着当您尝试在对象的事件处理程序内部防止“冒泡”时，您已经太迟了（在这种意义上，它确实没有向画布“冒泡”）。

我通过忽略所有具有目标的画布事件来防止执行画布事件，这意味着只有在我们什么都没有点击时才会运行：

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

希望这对你有所帮助。如果有其他更好的解决方案，请留言评论。

- Wilt

---

嘿，谢谢。有时候我在DOM、D3、Fabric/Canvas之间来回切换会有点混淆。 - spring