Javascript dragenter、dragover和drop事件在firefox中不起作用

我的js文件中有以下代码

window.onload = function () {

    var canvas = document.getElementById('canvas');
    canvas.addEventListener('dragover', drag_over, false);
    canvas.addEventListener('dragenter', drag_over, false);
    canvas.addEventListener('drop', dropped, false);
}

在某个时刻，我创建了一个像这样的可拖动元素

element.addEventListener('dragstart', dragstart, false);

我有这样的回调：

function dragstart(e) {
    console.log("dragstart");
}

function dropped(e) {
    console.log("dropped");
 }
function drag_over(e) {
    console.log("dragover");
    e.preventDefault();
    return false;
}

问题在于，该代码在chrome中运行良好，但在firefox中却无法运行。

---

在firefox中，会触发dragstart回调，但不会触发其他回调。不明：（

在Firefox中，您必须在拖动dragover时取消事件：

function dragstart(e) {
    e.preventDefault();
    e.stopPropagation();     /// add this too

    console.log("dragstart");
}

function drag_over(e) {
    e.preventDefault();
    e.stopPropagation();     /// add this too

    console.log("dragover");
    return false;
}

---

看看这是否适合您！

似乎您必须在

dragstart

函数中调用

.setData（）

，才能使其真正工作

function dragstart(e) {
    console.log("dragstart");
    e.dataTransfer.setData('text/plain', 'dummy');
}

下稿摘自:

在HTML中，除了图像、链接和 选择，默认情况下不可拖动其他元素。所有XUL 元素也是可拖动的。为了生成另一个HTML元素 可拖动，必须做两件事：

• 在要使其可拖动的元素上，将draggable属性设置为true
• 添加dragstart事件的侦听器，并在此侦听器中设置拖动数据

---

dragenter

和

dragover

都使用

drag\u over

。这是故意的吗？还是打字错误？