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

【问题标题】：Should 'stopPropagation' prevent canvas from receiving mouse events on Fabricjs objects?'stopPropagation' 是否应该阻止画布接收 Fabricjs 对象上的鼠标事件？
【发布时间】：2019-04-09 15:49:57
【问题描述】：

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

我有一个带有鼠标事件监听器的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);
        }
    },

【问题讨论】：

事件监听的添加顺序是什么？如果它们都添加到画布对象中，那么它们将按添加顺序执行。
@traktor53 – 画布有一个事件监听器。每个对象都有一个事件侦听器。我没有看到涉及任何订单问题。问题是我不希望对对象的点击通过（冒泡）传递到画布。
不确定你的意思。画布元素不能有子元素，因此在 DOM 事件处理中没有任何东西冒泡到画布上。为了让 fabric.js 处理画布上的小部件，它必须监听画布对象上的鼠标事件。
嘿@NoGrabbing 有趣的问题，你能创建一个 sn-p 重现这个问题吗？
我试过 event.e.stopPropagation();并经历了成功。所以它在 Angular 组件和织物画布的混合环境中对我有用。

标签： javascript fabricjs

【解决方案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

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

【讨论】：

嘿，谢谢。我有时会在 DOM、D3、Fabric/canvas 之间来回走动。