22
親要素の「ドラッグリーブ」は、子要素の上にドラッグすると発生します
概観 次のHTML構造があり、dragenterおよびdragleaveイベントを<div id="dropzone">要素にアタッチしました。 <div id="dropzone"> <div id="dropzone-content"> <div id="drag-n-drop"> <div class="text">this is some text</div> <div class="text">this is a container with text and images</div> </div> </div> </div> 問題 私は上のファイルをドラッグすると<div id="dropzone">、dragenter期待通りにイベントが発生します。私は子要素の上に私のマウスを移動すると、しかし、のような<div id="drag-n-drop">、dragenterイベントが焼成された<div id="drag-n-drop">要素と、その後dragleaveのイベントがために解雇される<div id="dropzone">要素。 <div id="dropzone">要素に再びカーソルを合わせると、dragenterイベントが再び発生しますが、これはクールですがdragleave、子要素の残りのイベントが発生するため、removeClass命令は実行されます。 この動作には2つの理由で問題があります。 dragenter＆dragleaveをアタッチしているだけな<div id="dropzone">ので、子要素にこれらのイベントもアタッチされている理由がわかりません。 <div id="dropzone">子の上にカーソルを置いている間も要素をドラッグしているのでdragleave、発砲したくありません！ jsFiddle jsFiddleをいじくり回します。 http 質問 だから...どうすれば、<div id="dropzone">要素の上にファイルをドラッグしているときにdragleave、子要素の上にドラッグしていても起動しないようにすることができます...要素を離れたときにのみ起動する必要があり<div id="dropzone">ます。要素の境界内の任意の場所でホバリング/ドラッグしても、イベントはトリガーされませんdragleave。 これは、少なくともHTML5のドラッグアンドドロップをサポートするブラウザーでは、ブラウザー間の互換性が必要なので、この答えは適切ではありません。 GoogleとDropboxはこれを理解しているようですが、それらのソースコードは縮小化/複雑化されているため、実装からこれを理解することができませんでした。