Disable event listening for objects

Question

I have 2 objects and that are overlaying each other. I would like to disable the event listening for the upper object, so I can listen to events for the lower object. In kinetic.js you can set that:

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

Is there any workaround in fabric.js?

Answer 1

You can use selectable: false for this. Since version 1.2.11, "selectable" not only controls object selectability but also makes events propagate through when set to 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);

See this example.

Answer 2

I found another approach by using 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;
    }
}

The isEditable property is a custom property that gets each object which can be modified.

Answer 3

Update to answer by kangax. Since version 1.3.4 you should use selectable:false in combination with evented:false to achieve that result. According to the official documentation about the evented property "When set to false, an object can not be a target of events. All events propagate through it." (See: http://fabricjs.com/docs/fabric.Object.html ).