Javascript 向动态创建的元素添加addEventListener无效

我有以下脚本，可将元素动态添加到画布：

<script src="https://unpkg.com/fabric@4.0.0-rc.1/dist/fabric.js"></script>
<script id="INLINE_PEN_JS_ID">
    (function () {
        var canvas = this.__canvas = new fabric.Canvas('c');
        fabric.Object.prototype.transparentCorners = false;

        fabric.loadSVGFromURL('images/hourglass.svg', function (objects, options) {

            var shape = fabric.util.groupSVGElements(objects, options);
            canvas.add(shape.scale(0.6));
            shape.set({ left: 200, top: 100 }).setCoords();
            canvas.renderAll();
            alert(shape.id)
        });
        shape.on('click', function () {
            alert("Handler for .click() called.");
        })
    })();
   
</script>

（功能（）{
var canvas=this.\uu canvas=newfabric.canvas（'c'）；
fabric.Object.prototype.transparentCorners=false；
fabric.loadSVGFromURL（'images/hourglass.svg'，函数（对象、选项）{
var shape=fabric.util.GroupsGelements（对象、选项）；
画布。添加（形状。比例（0.6））；
set（{left:200，top:100}）.setCoords（）；
canvas.renderAll（）；
警报（shape.id）
});
在（'click'，function（）{
警报（“调用了.click（）的处理程序”）；
})
})();

我想在没有运气的情况下单击或拖动新创建的“形状”来获得X和Y坐标。

---

任何人都有任何建议。谢谢

它不起作用，因为

const

使

shape

只存在于函数内部。 试试这个

fabric.loadSVGFromURL（'images/hourglass.svg'，函数（对象、选项）{
const shape=fabric.util.GroupsGelements（对象、选项）；
画布。添加（形状。比例（0.6））；
set（{left:200，top:100}）.setCoords（）；
canvas.renderAll（）；
警报（shape.id）
在（'click'，function（）{
警报（“调用了.click（）的处理程序”）；
})
});

编辑 实际上，

var

（显然，

let

）也会有同样的问题，因为在javascript中，变量的作用域是函数

---

有关更多详细信息，请查看

请创建一个工作代码段，是否需要包含html的整个脚本？我不确定你所说的“工作片段”是什么意思，因为“工作片段”是一个重现你问题的片段。正如您所看到的，这没有正确执行为什么是

shape.on（'click'，…

在实际渲染时没有使用代码？？？这回答了您的问题吗？塞德里克，我犯了一个错误。我更新了脚本。形状是var not const:var shape=fabric.util.groupSVGElements（对象、选项）；我将click event函数移到了内部，但仍然没有working@user3570022我也…有点…我更新了我的答案。这与

var

是一样的。如果你真的想保持

shape。在（'click'，…

函数外部，你应该在

fabric.loadSVGFromURL之前声明
shape
（…

我尝试了你的脚本，但它不起作用。老实说，我不在乎函数的位置。函数的内部或外部。只要我得到element@user3570022范围问题仍然存在，但另一个问题可能是

fabric.util.GroupsGelements（对象、选项）

不返回适当的对象。它返回什么？