Javascript 无法捕获fabricjs中的拖动事件

我正在尝试将外部div放到fabricjs画布中。我知道有一个答案，但对我来说不起作用

以下是我试图做的基本事情：

  let canvasContainer = document.getElementById('canvas')

  canvasContainer.addEventListener('dragenter', this.onDragEnter, false);
  canvasContainer.addEventListener('dragover',  this.onDragOver, false);
  canvasContainer.addEventListener('dragleave', this.onDragLeave, false);
  canvasContainer.addEventListener('drop',      this.onDrop, false);

但事件处理程序没有得到执行

我注意到了一件非常重要的事情：当我检查DOM时，我发现有两个画布：一个是

canvas lower canvas

，另一个是

canvas upper canvas

类

只有

lower-cavas

具有

id=“canvas”

属性。当我删除（通过web检查器手动删除）上部画布div时，事件处理程序确实得到了执行

下面是生成的HTML标记的外观：

<div class="canvas-container" style="width: 663px; height: 663px; position: relative; user-select: none;">
   <canvas data-v-346adb42="" id="canvas" class="canvas lower-canvas" width="1326" height="1326" style="position: absolute; width: 663px; height: 663px; left: 0px; top: 0px; touch-action: none; user-select: none;"></canvas>
   <canvas class="upper-canvas canvas" width="663" height="663" style="position: absolute; width: 663px; height: 663px; left: 0px; top: 0px; touch-action: none; user-select: none; cursor: default;"></canvas>
</div>

---

我不知道为什么会有两张画布。即使我没有删除上面的画布，我仍然会得到绿色的加号，就像我的div已经准备好被删除一样。

要绑定eventlistners，请使用

canvas.on（event，handler）

演示

var canvas=newfabric.canvas（'canvas'））
画布上（'dragenter'，onDragEnter，false）；
画布上（'dragover'，onDragOver，false）；
画布上（'dragleave'，onDragLeave，false）；
画布上的（'drop'，onDrop，false）；
函数onDragEnter（）{
console.log（'onDragEnter'）
}
函数onDragOver（）{
console.log（'onDragOver'）
}
函数ondragleef（）{
console.log（'ondragleef'）
}
函数onDrop（）{
console.log（'onDrop'）
}

#画布{
背景颜色：绿色；
}
#拖拉的{
宽度：100px；
高度：100px；
背景色：红色；
}

是的，有两张画布，请用最短的片段说明您的问题。在这里，它是…使用宽度和高度内画布标记，而不是css。