«Перетаскивание» родительского элемента срабатывает при перетаскивании дочерних элементов

Обзор

У меня есть следующая структура HTML, и я атаковал перенаправил события dragenterи dragleaveв элемент

.

    

        

            
this is some text
            
this is a container with text and images
        
    

Проблема

Когда я перетаскиваю файл поверх

, событие dragenterзапускается, как и ожидалось. Однако, когда я навожу указатель мыши на дочерний элемент, например

, событие dragenterзапускается для , а затем для элемента

запускается событие dragleave.

Если я снова наведу указатель мыши на элемент

, снова запустится событие dragenter, что круто, но затем dragleaveзапускается для только что оставшегося дочернего элемента, поэтому выполняется инструкция removeClass, что не круто.

Такое поведение вызывает проблемы по двум причинам:

1. Я только прикрепляю dragenterи dragleaveк

   поэтому я не понимаю, почему к дочерним элементам также привязаны эти события.

2. Я все еще перетаскиваю элемент

   , наводя курсор на его дочерние элементы, поэтому я не хочу, чтобы dragleaveсрабатывал!

   jsFiddle

   Вот jsFiddle, с которым можно повозиться: http://jsfiddle.net/yYF3S/2/

   Вопрос

   Итак... как мне сделать так, чтобы когда я m перетаскивая файл поверх элемента

   , dragleaveне срабатывает, даже если я перетаскиваю какие-либо дочерние элементы... он должен только срабатывать когда я покидаю элемент

   ... зависание/перетаскивание в любом месте в пределах границ элемента не должновызывать dragleaveмероприятие.

   Мне нужно, чтобы это было совместимо с несколькими браузерами, по крайней мере, в браузерах, поддерживающих HTML5 drag-n-drop, поэтому этот ответне подходит.

   Кажется, что Google и Dropbox поняли это, но их исходный код минимизирован/сложн, поэтому я не смог понять это из их реализации.