禁用对象的事件监听答案

【问题标题】：Disable event listening for objects禁用对象的事件监听
【发布时间】：2013-09-05 19:07:31
【问题描述】：

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

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

fabric.js 中有什么解决方法吗？

【问题讨论】：

标签： javascript events canvas fabricjs listen

【解决方案1】：

您可以为此使用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);

见this example。

【讨论】：

好的，我的画布的选择设置为false - var canvas = new fabric.Canvas('c', {selection: false});防止组选择。您知道这种情况是否有解决方法吗？
不确定你的意思。顺便说一句，请确保您使用的是 1.2.11 版本而不是 1.2.0 版本（就像您在小提琴中一样）。

【解决方案2】：

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

【讨论】：

【解决方案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 属性是一个自定义属性，用于获取每个可以修改的对象。

【讨论】：