Показывать наложение на «dragenter» при перетаскивании файла с рабочего стола в браузер

я пытаюсь добиться того же эффекта как на imgur.com (перетащите файл с рабочего стола на imgur.com, и вы увидите классное наложение). уже есть рабочее решение благодаря этой публикации: Распространение событий, наложение и события перетаскивания

НО: я нахожу решение довольно неудовлетворительным. проблема в том, что $ (document) .on ('dragenter') запускается несколько раз при наведении курсора на дочерние элементы. Я искал событие, которое запускается ОДИН РАЗ, когда я вхожу в область просмотра, и ОДИН РАЗ, когда я выхожу из области просмотра, чтобы у меня было чистое наложение $.fadeIn () и .fadeOut () в dragenter и dragleave.

Я решил это с помощью прозрачного элемента, заполняющего всю область просмотра. Затем я вызываю dragenter для этого прозрачного элемента, а не для $ (document). с помощью $ ('*: visible'). live ('dragenter') я затем показываю скрытый и реальный оверлей. $ ('# transparentOverlay'). on ('dragleave') скрывает оверлеи. довольно хакерский, но он работает (по крайней мере, в safari / chrome / firefox)

но только селектор $ ('*: visible'). live () вызывает у меня головную боль ...

у кого-нибудь есть предложение получше?