[roms]

Добрый день.
Сделал загрузку фотографий на страницу перетаскиванием. Работает.
Для исключения ошибок, хочу подсвечивать адресную ячейку при перетаскивании. Что бы клиент видел, в какую ячейку таблицы он сейчас перетаскивает фото, и не ошибался. Для этого подключил обработчики dragenter/dragleave и повесил изменение фона ячейки.

Сложность:
В ячейке есть вложенный текст.
И когда перетаскивание остаётся в ячейке, но заходит на текст, генерируется dragleave, и выделение снимается.
Причём, обработчиков на вложенном тексте нет. Но почему-то для него тоже генерятся dragenter/dragleave. Что вроде не должно быть, если я правильно понимаю.
А нужно, естественно, что бы пока объект перетаскивается на ячейке, что бы ячейка была подсвечена, независимо от наличия другого текста или вложенных элементов в ячейке.

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

Короче:
1) как сделать подсветку ячейки, пока перетаскивание на ней, независимо от дочерних элементов?
2) Почему dragenter/dragleave генерируются на дочерних элементах ячейки, хотя обработчики только на самой ячейке?

<style>
    td.highlighted {
        background-color: Aquamarine;
    }
</style>

<table class='personsTable' id='personsTable'>
    <tr>
        <th>ФИО</th>
        <th>Фотография</th>
    </tr>
    <tr>
        <td><p>Иванов Иван Иванович</p></td>
        <td class='photo'><p>нет фотографии</p></td>
    </tr>
    <tr>
        <td><p>Пётр Петрович Петров</p></td>
        <td class='photo'><p>нет фотографии</p></td>
    </tr>
    <tr>
        <td><p>Сидор Сидорович Сидоров</p></td>
        <td class='photo'><p>нет фотографии</p></td>
    </tr>
</table>

let personsTable = document.getElementById('personsTable');

    let dropTdCollection = personsTable.getElementsByClassName('photo');

    for (let td of dropTdCollection) {

        ['dragenter', 'dragleave', 'dragover', 'drop'].forEach(eventName => {
            td.addEventListener(eventName, preventDefaults, false);
        });

        td.addEventListener('drop', handleDrop, false);
        td.addEventListener('dragenter', highlightOn);
        td.addEventListener('dragleave', highlightOff);

    }

    function preventDefaults(e)
    {
        e.preventDefault();
        e.stopPropagation();
    };

    function highlightOn(e)
    {
        let element = e.target;
            console.log("element="+element);
        element.classList.add('highlighted');
    }
    
    function highlightOff(e)
    {
        let element = e.target;
            console.log("element="+element);
        element.classList.remove('highlighted');
    }

    function handleDrop(e) 
    {
        // загрузка фотографии
    }