HTML拖放，dragover事件返回子元素而不是父元素

Question

在提供的示例中，当我将任何元素拖到“Category1”上时，console.log 会输出子元素“DIV”而不是父元素“LI”。

任何解决方案都将不胜感激。

document.addEventListener('dragover', function (event) {
        event.stopPropagation();
        event.preventDefault();
        console.log(event.target.tagName);
    }, true);

<ul>
        <li draggable='true'><div draggable="false">Category 1</div> 
        <ul>
            <li draggable='true'> * Item 1 </li>
            <li draggable='true'> *  Item 2 </li>
            <li draggable='true'> *  item 3 </li>
        </ul>
        <li draggable='true'><div draggable="false">Category 2</div> 
        <ul>
            <li draggable='true'> * Item 1 </li>
            <li draggable='true'> *  Item 2</li>
        </ul>
        </li>
    </li>
</ul>

Answer 1

在 EventListener 中使用“drag”而不是“dragover”。

document.addEventListener('drag', function (event) {
        event.stopPropagation();
        event.preventDefault();
        console.log(event.target.tagName);
},true);

Answer 2

正在考虑使用 FOR 循环来通过 DOM，直到找到 LI。

function getfirstLI(el)
{
for (i = 0; i < 10; i++) {
if (el.tagName == "LI") return el;
if (el.tagName == "UL") return null;
if (el.tagName == "body") return null;
el = el.parentNode;
}