javascript - 禁用对象的事件监听

Question

我有 2 个对象，它们相互重叠。我想禁用监听上层对象的事件，这样我就可以监听下层对象的事件。在 kinetic.js 中，您可以设置：

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

fabric.js 中是否有任何解决方法？

Answer 1

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

Answer 2

你可以用selectable: false这个。从 1.2.11 版本开始，“selectable”不仅控制对象的可选择性，而且当设置为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);

请参阅此示例。

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 属性是获取每个可以修改的对象的自定义属性。