javascript - jQuery.on("drop") not firing -

i'm trying implement drag , dropping of files desktop browser window. have used jquery attach 3 events html element in code below:

$("html").on("dragover", function() {     $(this).addclass('dragging'); });  $("html").on("dragleave", function() {     $(this).removeclass('dragging'); });  $("html").on("drop", function(event) {     event.preventdefault();       event.stoppropagation();     alert("dropped!"); }); 

the 'dragover' , 'dragleave' events work fine, displaying inset border around entire page when drag file on removing if drag file out again.

however, 'drop' event doesn't seem fire @ all, dropped file opens in browser window.

does have idea why event not firing?

btw, testing in latest version of chrome , using jquery 1.10.2.

you need cancel events

$("html").on("dragover", function(event) {     event.preventdefault();       event.stoppropagation();     $(this).addclass('dragging'); });  $("html").on("dragleave", function(event) {     event.preventdefault();       event.stoppropagation();     $(this).removeclass('dragging'); });  $("html").on("drop", function(event) {     event.preventdefault();       event.stoppropagation();     alert("dropped!"); });