Aperçu
J'ai la structure HTML suivante et j'ai attaché les événements dragenter
et dragleave
à l' <div id="dropzone">
élément.
<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>
Problème
Lorsque je fais glisser un fichier sur le <div id="dropzone">
, l' dragenter
événement est déclenché comme prévu. Cependant, lorsque je déplace ma souris sur un élément enfant, tel que <div id="drag-n-drop">
, l' dragenter
événement est déclenché pour l' <div id="drag-n-drop">
élément, puis l' dragleave
événement est déclenché pour l' <div id="dropzone">
élément.
Si je survole à <div id="dropzone">
nouveau l' élément, l' dragenter
événement est à nouveau déclenché, ce qui est cool, mais l' dragleave
événement est déclenché pour l'élément enfant qui vient de quitter, donc l' removeClass
instruction est exécutée, ce qui n'est pas cool.
Ce comportement est problématique pour 2 raisons:
Je m'attache seulement
dragenter
&dragleave
au<div id="dropzone">
donc je ne comprends pas pourquoi les éléments enfants ont ces événements attachés aussi bien.Je traîne toujours sur l'
<div id="dropzone">
élément tout en survolant ses enfants donc je ne veuxdragleave
pas tirer!
jsFiddle
Voici un jsFiddle à bricoler: http://jsfiddle.net/yYF3S/2/
Question
Alors ... comment puis-je faire en sorte que lorsque je fais glisser un fichier sur l' <div id="dropzone">
élément, dragleave
ne se déclenche pas même si je traîne sur des éléments enfants ... il ne devrait se déclencher que lorsque je quitte l' <div id="dropzone">
élément ... . le survol / le glissement n'importe où dans les limites de l'élément ne doit pas déclencher l' dragleave
événement.
J'ai besoin que cela soit compatible avec tous les navigateurs, au moins dans les navigateurs prenant en charge le glisser-déposer HTML5, donc cette réponse n'est pas adéquate.
Il semble que Google et Dropbox aient compris cela, mais leur code source est minifié / complexe, donc je n'ai pas été en mesure de comprendre cela à partir de leur implémentation.
e.stopPropagation();