title: Firefox drag and drop redirect stop JQUERY
body: <p>I am using fabric.js library to create a drag and drop moodboard creator. Everything works perfect, except in Firefox when I drag and drop the image to the canvas. It adds the image, but redirects to the img url. After the redirect, When I click on the back btn it goes back to the previous page and the image is on the canvas. </p>
  
  <p>I have been searching and reading for a few hours now, trying all kinds of things. It seems that something in my code is preventing either "e.stopPropagation();" or "e.preventDefault()" from functioning correctly. I just cant seem to find the gremlin.</p>
  
  <p>Any help would be great. Thanks!</p>
  
  <p><strong>UPDATE: Added JSFiddle.</strong><br>
  here is a jsfiddle with my code:<br>
  <a href="http://jsfiddle.net/bQxMu/" rel="nofollow">http://jsfiddle.net/bQxMu/</a></p>
  
  <p><strong>UPDATE 2:</strong><br>
  Fixed the issue, here is the part that fixed it:</p>
  
  <pre><code>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;
  }
  </code></pre>
  
  <p>Thanks for all the help :)</p>
  
  <pre><code>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 &amp;&amp; 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.");
  }
  
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="images"&gt;
  &lt;img draggable="true" src="http://i.imgur.com/q9aLMza.png" width="70" height="90"&gt;&lt;/img&gt;    
  &lt;/div&gt;
  
  &lt;div id="canvas-container-controls"&gt;
  &lt;div id="imageControlWrapper"&gt;
  &lt;div id="imageControl"&gt;
  &lt;button class= "imgBtn" id="saveImg"&gt;Save Canvas&lt;/button&gt;
  &lt;button class="imgBtn" id="remove-selected"&gt;Remove selected object/group&lt;/button&gt;
  &lt;button id="send-backwards" class="imgBtn"&gt;Send backwards&lt;/button&gt;
  &lt;button id="send-to-back" class="imgBtn"&gt;Send to back&lt;/button&gt;
  &lt;button id="bring-forward" class="imgBtn"&gt;Bring forwards&lt;/button&gt;
  &lt;button id="bring-to-front" class="imgBtn"&gt;Bring to front&lt;/button&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div id="canvas-container"&gt;
      &lt;canvas id="canvas" width="400" height="400"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>