Fabric.js对象绑定mouse:down事件无效问题求助

在Fabric.js中为矩形（rect）绑定了mouse:down事件，但点击该矩形时，控制台仅输出“click the canvas”，无法触发矩形自身的“click the rect”事件，该如何解决？

以下是示例代码：

var canvas = window._canvas = new fabric.Canvas('c');

var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 100,
    height: 100
  });

canvas.add(rect);

rect.on('mouse:down', function(options){
    console.log("click the rect");
})

canvas.on('mouse:down',function(options){
    console.log("click the canvas");
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
<canvas id="c" width="600" height="600"></canvas>

解决方案 #

原因分析 #

正常情况下，上述代码点击矩形时应该同时触发矩形和canvas的mouse:down事件。若仅触发canvas事件，大概率是矩形的事件交互属性被禁用，或事件冒泡逻辑需要调整。

解决步骤 #

• 确保矩形允许响应事件
  Fabric.js对象默认开启事件响应，但可显式设置evented: true确保属性未被意外修改：

  var rect = new fabric.Rect({
      left: 100,
      top: 100,
      fill: 'red',
      width: 100,
      height: 100,
      evented: true // 强制开启事件响应
  });
  

• 按需阻止事件冒泡
  若需求是点击矩形时仅触发自身事件、不触发canvas事件，可在矩形的事件处理函数中阻止事件传递：

  rect.on('mouse:down', function(options){
      console.log("click the rect");
      options.e.stopPropagation(); // 停止事件冒泡到canvas
  })
  

• 验证事件绑定时机
  事件绑定在矩形添加到canvas前后均可生效，你的现有代码绑定时机正确，无需调整。

• 检查版本兼容性
  你使用的5.3.1版本为稳定版，若问题仍存在，可尝试升级至最新稳定版排查版本bug。

完整修正代码 #

var canvas = window._canvas = new fabric.Canvas('c');

var rect = new fabric.Rect({
    left: 100,
    top: 100,
    fill: 'red',
    width: 100,
    height: 100,
    evented: true
});

canvas.add(rect);

rect.on('mouse:down', function(options){
    console.log("click the rect");
    options.e.stopPropagation(); // 可选：关闭canvas事件触发
});

canvas.on('mouse:down',function(options){
    console.log("click the canvas");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/5.3.1/fabric.min.js"></script>
<canvas id="c" width="600" height="600"></canvas>

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