`drop`イベントの後にリダイレクトを止めるには？

Question

Firefoxのdivにファイルをドロップした後、ウェブページがこのファイルにリダイレクトされます。私はdropハンドラでjQueryのe.preventDefault()を使ってこの伝搬を止めようとしましたが失敗しました。

#testにファイルをドロップすると、ウェブページはリダイレクトされませんが、#test1にドロップすると、その理由がわかります。 の後に伝播を防ぐには、ハンドラを常にdragenter、dragover、dragleaveおよびdropにバインドする必要がありますか？

更新：

私たちがしなければならないすべては、dragOverイベントをキャンセル で、私たちは、この要素にドロップすることができ、ブラウザを伝えるために：

私はhtml5doctor上のいくつかのヒントが見つかりました。しかし、IEの動作が異なるため、 はdragenterイベントに対して同じ処理を行う必要があります。

とMozilla claims：

リスナーdragenterとdragoverイベントが に使用されているためには、それは、ドラッグしたアイテムを ドロップすることができる場所で、有効なドロップターゲットを示しています。

しかし、私は、Firefox、#test作品や#test1にthis demoをテストするには、Mozillaがミスを犯したようだしない、とhtml5doctorは右です：Firefoxは唯一drop仕事をするためにdragoverを必要とします。

Answer 1

ondragoverイベントがondropイベントを発射できるようにGoogle Chromeのとサファリでキャンセルする必要があります。

Answer 2

onDragOverをキャンセルするだけでは十分ではないことに気付きましたが、onDragDropとonDragLeaveもキャンセルする必要がありました。以下は、私は、ユーザーが何をしているかの行動をロギングを示しています：

<script type="text/javascript"> 

    var handledragleave = function handleDragLeave(e) { 
      console.log("Floating away. Do code here when float away happens."); 
      return this.cancelDefaultBehavior(e); 
    } 

    var handledragdrop = function handleDrop(e) { 
      console.log("Dropping. Do code here when drop happens."); 
      return this.cancelDefaultBehavior(e); 
    } 

    var handledragover = function handleDragOver(e) { 
      console.log("Floating over. Do code here when float over happens."); 
      return this.cancelDefaultBehavior(e); 
    } 

    cancelDefaultBehavior(e) { 
      e.preventDefault(); 
      e.stopPropagation(); 
      return false; 
    } 

$('.your-element-being-dragged-to') 
    .on('DragLeave', handledragleave) 
    .on('DragDrop', handledragdrop) 
    .on('DragOver', handledragover); 

</script> 

をそしてあなたの要素...

<p class="your-element-being-dragged-to">Drag something here!</p>