Fabric.js Canvas事件监听器未触发问题求助

我帮你找出了两个导致事件监听器无法触发的核心问题，下面逐一说明并给出修复方案：

1. 事件处理函数的定义顺序搞反了 #

你现在的代码是先绑定事件，再定义modifiedHandler函数。但JavaScript里var声明会被提升，可函数赋值不会——也就是说，当你执行canvas.on(...)的时候，modifiedHandler其实还是undefined，相当于你根本没绑定有效的处理函数，自然不会有任何输出。

修复方式：把modifiedHandler的定义移到事件绑定代码的前面，确保绑定的时候函数已经存在。

2. Canvas创建函数里的this指向混乱 #

你的canvas函数是直接调用的（没加new关键字），所以函数内部的this指向的是全局的window对象。而内部的object函数作为普通函数调用时，this同样指向window，导致创建fabric.Canvas时传入的height和width根本不是你传入的300和100，而是window的宽高（大概率是undefined）。Canvas尺寸不符合预期，也会影响事件的正常触发。

修复方式：直接简化Canvas的创建逻辑，避开this指向的坑：

修复后的完整代码示例 #

// 先定义事件处理函数，确保绑定阶段它已存在
var modifiedHandler = function (event) { 
    console.log('trigger'); 
};

// 简化Canvas创建逻辑，直接返回fabric实例
function createCanvas(width, height) {
    return new fabric.Canvas('id', { 
        selection: false, 
        height: height, 
        width: width 
    });
}

// 初始化Canvas
var canvas = createCanvas(300, 100);

// 绑定事件监听器
canvas.on({ 
    'mouse:up': modifiedHandler, 
    'mouse:down': modifiedHandler, 
    'object:modified': modifiedHandler 
});

这样调整之后，不管是鼠标点击Canvas还是修改画布上的对象，控制台都会正常输出trigger了。

内容的提问来源于stack exchange，提问作者Sam