Genel bakış

Aşağıdaki HTML yapısı var ve <div id="dropzone"> öğe dragenter dragleave olayları ekledim.

<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>

Sorun

<div id="dropzone">, Bir dosya sürükleyin dragenter olay beklendiği gibi kovuldu. Ancak, ne zaman ben taşımak benim fare üzerinde bir alt öğe, gibi <div id="drag-n-drop"> dragenter olay, ateş için <div id="drag-n-drop"> eleman ve dragleave olay, ateş için <div id="dropzone"> element.

Eğer ben hover <div id="dropzone"> eleman yine dragenter olay tekrar ateş, serin, ama sonra dragleave olay, ateş için sol alt öğesi, removeClass Yönerge yürütüldü, hiç hoş değil.

Bu davranış, 2 nedenden dolayı problemli

1. Sadece elemanları bu olaylar da eklenmiş anlamıyorum neden bu kadar <div id="dropzone"> * & * 18 ** 17 iliştiriyorum.

2. Hala onun çocukları üzerinde havada iken <div id="dropzone"> öğe üzerinde sürüklüyorum ateş dragleave istemiyorum!

jsFiddle

Burada tamircilik bir jsFiddle: http://jsfiddle.net/yYF3S/2/

Soru

Yani... nasıl yapabilirim ki bunu böyle o zaman ben sürükleyerek bir dosya üzerinde <div id="dropzone"> element dragleave gelmez ateş bile değilim sürükleme üzerinde herhangi bir çocuk element... gereken sadece yangın olduğunda bırakıyorum <div id="dropzone"> eleman... gezinip/takıyorum her yerde sınırları içinde elementolmamalıdırdragleave olayı tetikler.

Bu en azından HTML5 sürükle-n-bırak desteği olan tarayıcılarda çapraz tarayıcı uyumlu olması gerekiyor, this answer yeterli değildir.

Google ve Dropbox bu anladım var gibi görünüyor, ama kendi kaynak kodu uygulamadan anlamaya mümkün olmamıştır, bu yüzden minified/karmaşık.

Eğer alt öğeleri, olayları bağlamak için ihtiyacın olursa, her zaman pointer-events özelliği kullanabilirsiniz.

.child-elements {
  pointer-events: none;
}