Javascript Firefox拖放重定向停止JQUERY

我正在使用fabric.js库创建一个拖放式moodboard创建者。除了在Firefox中将图像拖放到画布时，一切都很完美。它添加图像，但重定向到img url。在重定向之后，当我单击back btn时，它会返回到上一页，并且图像位于画布上

我已经搜索和阅读了几个小时，尝试了各种各样的东西。我的代码中似乎有什么东西阻止了“e.stopPropagation（）；”或“e.preventDefault（）”正常工作。我就是找不到小精灵

任何帮助都会很好。谢谢

更新：添加了JSFIDLE。
下面是一个包含我的代码的JSFIDLE:

更新2:
修复了该问题，以下是修复该问题的部分：

function handleDrop(e) {
// this / e.target is current target element.

/*
    if (e.stopPropagation) {
        e.stopPropagation(); // stops the browser from redirecting.
    }
*/

    e.stopPropagation(); // Stops some browsers from redirecting.
    e.preventDefault(); // Stops some browsers from redirecting.

    var img = document.querySelector('#images img.img_dragging');

    console.log('event: ', e);

    var newImage = new fabric.Image(img, {
        width: img.width,
        height: img.height,
    // Set the center of the new object based on the event coordinates relative
    // to the canvas container.
        left: e.layerX,
        top: e.layerY
    });
    canvas.add(newImage);

    return false;
}

谢谢你的帮助：）

HTML:

保存画布
删除选定对象/组
向后发送
发回
提出
摆在前面

在handleDrop中添加e.preventDefault（）

---

我的理解是，您应该在

handleDragOver

中设置

e.stopPropagation

，否则浏览器仍会接受事件并打开图像

---

（与我在此处的回答类似：）

…我添加了您建议的代码，但仍然无法阻止重定向。感谢：）的帮助。如果您添加了修改代码，这将非常有用。很抱歉，如果您下次发现自己的问题，这里有一个链接，您可以始终添加您的答案并将其标记为已接受。：）

window.onload=function(){

var canvas = new fabric.Canvas('canvas');

canvas.backgroundColor = '#ffffff';


function handleDragStart(e) {
    [].forEach.call(images, function (img) {
        img.classList.remove('img_dragging');
    });
    this.classList.add('img_dragging');

}

function handleDragOver(e) {
    if (e.preventDefault) {
        e.preventDefault(); // Necessary. Allows us to drop.

    }

    e.dataTransfer.dropEffect = 'copy';

    return false;
}

function handleDragEnter(e) {
    // this / e.target is the current hover target.

    this.classList.add('over');

}

function handleDragLeave(e) {
    e.stopPropagation();

    this.classList.remove('over'); // this / e.target is previous target element.

}

function handleDrop(e) {
    // this / e.target is current target element.

    if (e.stopPropagation) {
        e.stopPropagation(); // stops the browser from redirecting.
    }

    var img = document.querySelector('#images img.img_dragging');

    console.log('event: ', e);

    var newImage = new fabric.Image(img, {
        width: img.width,
        height: img.height,
        // Set the center of the new object based on the event coordinates relative
        // to the canvas container.
        left: e.layerX,
        top: e.layerY
    });
    canvas.add(newImage);
    return false;
}

function handleDragEnd(e) {
    // this/e.target is the source node.
    [].forEach.call(images, function (img) {
        img.classList.remove('img_dragging');

    });
}

  var removeSelectedEl = document.getElementById('remove-selected');
  removeSelectedEl.onclick = function() {
    var activeObject = canvas.getActiveObject(),
        activeGroup = canvas.getActiveGroup();
    if (activeGroup) {
      var objectsInGroup = activeGroup.getObjects();
      canvas.discardActiveGroup();
      objectsInGroup.forEach(function(object) {
        canvas.remove(object);
      });
    }
    else if (activeObject) {
      canvas.remove(activeObject);
        $("#imageControl").fadeOut('slow');

    }
  };

  var sendBackwardsEl = document.getElementById('send-backwards');
  sendBackwardsEl.onclick = function() {
    var activeObject = canvas.getActiveObject();
    if (activeObject) {
      canvas.sendBackwards(activeObject);
    }
  };

  var sendToBackEl = document.getElementById('send-to-back');
  sendToBackEl.onclick = function() {
    var activeObject = canvas.getActiveObject();
    if (activeObject) {
      canvas.sendToBack(activeObject);
    }
  };

  var bringForwardEl = document.getElementById('bring-forward');
  bringForwardEl.onclick = function() {
    var activeObject = canvas.getActiveObject();
    if (activeObject) {
      canvas.bringForward(activeObject);
    }
  };

  var bringToFrontEl = document.getElementById('bring-to-front');
  bringToFrontEl.onclick = function() {
    var activeObject = canvas.getActiveObject();
    if (activeObject) {
      canvas.bringToFront(activeObject);
    }
  };

 document.getElementById('saveImg').onclick = function() {
    if (!fabric.Canvas.supports('toDataURL')) {
      alert('This browser doesn\'t provide means to serialize canvas to an image');
    }
    else {
    canvas.deactivateAll().renderAll();
      window.open(canvas.toDataURL('png'));
    }
  };



canvas.on('selection:cleared', function(options) {
    var activeObject = canvas.getActiveObject();
        if (activeObject === null) {
                $("#imageControl").fadeOut('slow');
            }
});

canvas.on('object:selected', function(options) {
    var activeObject = canvas.getActiveObject();
         if (options.target && activeObject !== null) {
                     $("#imageControl").show('slow');
                }
});

canvas.on('selection:created', function(options) {
         if (options.target) {
                    $("#imageControl").show('slow');
                 }
});


if (Modernizr.draganddrop) {
    // Browser supports HTML5 DnD.

    // Bind the event listeners for the image elements
    var images = document.querySelectorAll('#images img');
    [].forEach.call(images, function (img) {
        img.addEventListener('dragstart', handleDragStart, false);
        img.addEventListener('dragend', handleDragEnd, false);
    });
    // Bind the event listeners for the canvas
    var canvasContainer = document.getElementById('canvas-container');
    canvasContainer.addEventListener('dragenter', handleDragEnter, false);
    canvasContainer.addEventListener('dragover', handleDragOver, false);
    canvasContainer.addEventListener('dragleave', handleDragLeave, false);
    canvasContainer.addEventListener('drop', handleDrop, false);

} else {
    // Replace with a fallback to a library solution.
    alert("This browser doesn't support the HTML5 Drag and Drop API.");
}

}

<div id="images">
<img draggable="true" src="http://i.imgur.com/q9aLMza.png" width="70" height="90"></img>    
</div>

<div id="canvas-container-controls">
<div id="imageControlWrapper">
<div id="imageControl">
<button class= "imgBtn" id="saveImg">Save Canvas</button>
<button class="imgBtn" id="remove-selected">Remove selected object/group</button>
<button id="send-backwards" class="imgBtn">Send backwards</button>
<button id="send-to-back" class="imgBtn">Send to back</button>
<button id="bring-forward" class="imgBtn">Bring forwards</button>
<button id="bring-to-front" class="imgBtn">Bring to front</button>
</div>
</div>

<div id="canvas-container">
    <canvas id="canvas" width="400" height="400"></canvas>
</div>
</div>

function handleDrop(e) {
// this / e.target is current target element.
e.preventDefault();
if (e.stopPropagation) {
    e.stopPropagation(); // stops the browser from redirecting.
}

var img = document.querySelector('#images img.img_dragging');

console.log('event: ', e);

var newImage = new fabric.Image(img, {
    width: img.width,
    height: img.height,
    // Set the center of the new object based on the event coordinates relative
    // to the canvas container.
    left: e.layerX,
    top: e.layerY
});
canvas.add(newImage);

return false;
}