javascript - 'drop' event already done stopPropagation() and preventDefault() in div, why browser opens the picture after I drop it? -

i practicing writing file drop & upload plugin. in 400px * 400px div, catches 'drop' event, i've added code in handler:

dropupload.prototype.drop = function (event) { ...         event.stoppropagation();         event.preventdefault(); ... } 

but when drop picture file in div, browser open picture on page, flushing out previous script page. learned googling that

      $(document).on('dragenter', function (e)              { e.stoppropagation(); e.preventdefault(); });       $(document).on('dragover', function (e)          { e.stoppropagation(); e.preventdefault(); });       $(document).on('drop', function (e)          { e.stoppropagation(); e.preventdefault(); }); 

can prevent opening picture. think i've prevent drop event bubbling in div element adding stoppropogation(), why should again on document element?

is because drop event enters document first , reaches div? please me understand this. thank you!

i answering own question since made mistake. hope can save time sharing mistake.

in order let drop zone handle drop event, have do

event.stoppropagation(); event.preventdefault(); 

for 3

    this.$element.on('dragenter', this.dragenter);     this.$element.on('dragover', this.dragover);     this.$element.on('drop', this.drop); 

events. if miss 1 function 1 of 3 events, new drop cause browser load file drop.

or can disable default event behavior on document element, doing on drop zone more logical , looks less hack.

this mdn document explain details.

sincerely,

nick