應該'stopPropagation'阻止canvas在Fabricjs對象上接收鼠標事件嗎？

Question

這是一個非常簡單的問題，但我似乎無法找到答案。

我有一個fabricjs了鼠標eventListener的fabricjs畫布實例。 我還有一堆帶有鼠標eventListeners的對象。 我不希望對象上的鼠標事件傳遞到畫布。 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事件在對象事件之前觸發，這意味着當你試圖阻止在對象的事件處理程序中“冒泡”時你已經太晚了（在這種意義上它確實沒有“冒泡”到畫布）。

我只是通過忽略所有具有目標的畫布事件來阻止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

希望這是有幫助的。 如果還有其他（更好的解決方案）請評論。