Question

我有2个物体，彼此重叠。我想禁用侦听上层对象的事件，因此我可以侦听下层对象的事件。在kinetic.js中你可以设置：

http://kineticjs.com/docs/Kinetic.Shape.html#setListening

fabric.js中有解决方法吗？

Answer 1

您可以使用selectable: false。从版本1.2.11开始，“可选择”不仅控制对象可选择性，还使事件在设置为false时传播。

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

var rect1 = new fabric.Rect({
    left: 200,
    top: 200,
    width: 200,
    height: 200,
    fill: 'rgba(255,0,0,0.5)',
    selectable: false           // <--- note this
});

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

canvas.add(rect2, rect1);

请参阅this example。

Answer 2

更新以回答kangax。从版本1.3.4开始，您应该使用selectable：false与evented：false结合使用以实现该结果。根据关于evented属性的官方文档“当设置为false时，对象不能成为事件的目标。所有事件都通过它传播。” （见：http://fabricjs.com/docs/fabric.Object.html）。

Answer 3

我通过使用containsPoint找到了另一种方法：

var objects = stage.getObjects();
for(var i=0; i < objects.length; ++i) {
    var object = objects[i];
    if(object.isEditable && stage.containsPoint(opts.e, object)) {
        stage.setActiveObject(object);
        break;
    }
}

isEditable属性是一个自定义属性，用于获取可以修改的每个对象。

禁用侦听对象的事件

3 个答案: