Question

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

我有一个fabricjs画布实例，其中附加了鼠标eventListener。我还有一堆带有鼠标事件监听器的对象。我不希望将对象上的鼠标事件传递到画布。 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.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

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

“ stopPropagation”是否应阻止画布在Fabricjs对象上接收鼠标事件？

1 个答案: