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中使用“拖动”而不是“拖动”。

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

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

2 个答案: