时间戳

首页 > 解决方案 > 'stopPropagation' 是否应该阻止画布接收 Fabricjs 对象上的鼠标事件？

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

问题描述

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

我有一个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);
        }
    },

标签： javascriptfabricjs

解决方案

正如@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

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

推荐阅读