当我拖过一个项目时，拖放“dragover”事件以捕捉可拖动的父项而不是子项？里面的简单例子

Question

我在下面提供的代码功能齐全。当您将一个项目拖到另一个项目上时，该dragover事件会捕获并显示它。

要理解我的意思，请在此处亲自尝试：https ://jsfiddle.net/athanasis/oydbrsxt/2/

我不喜欢的行为：使用我的代码，尝试将任何项目拖到列表中的任何“子内容”或“内容”单词上。该dragover事件捕获并显示该元素的文本，而不是父可拖动 li 元素的文本。

Javascript（纯）：

<script>

  document.addEventListener('dragover', function (event) { allowDrop(event); }, true);

    function allowDrop(ev) 

    {   el = ev.target;

        document.getElementById("result").innerHTML = el.innerHTML;

    }    

</script>

HTML：

<div id="result">CLICK AND DRAG ON ANOTHER ITEM</div>

<ul>Category 1 

    <li draggable="true">item 1 <span> Content 1 <span> Sub-Content 1</span> </span> </li>

    <li draggable="true">item 2 <span> Content 2 <span> Sub-Content 2</span> </span> </li>     

    <li draggable="true">item 3 <span> Content 3 <span> Sub-Content 3</span> </span> </li>

    <li draggable="true">item 4 <span> Content 4 <span> Sub-Content 4</span> </span> </li>

    <li draggable="true">item 5 <span> Content 5 <span> Sub-Content 5</span> </span> </li>

</ul>

关于当我拖到任何孩子而不是孩子本身时如何捕捉和显示父元素的任何想法？

Answer 1

我们可以向上层级，直到我们对结果感到满意：document.addEventListener('dragover', function (event) { allowDrop(event); }, true);&nbsp; &nbsp; function allowDrop(ev)&nbsp;&nbsp; &nbsp; {&nbsp; &nbsp;el = ev.target;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; while ((el.tagName !== "LI") && (el.tagName !== "BODY")) el = el.parentNode;&nbsp; &nbsp; &nbsp; &nbsp; document.getElementById("result").innerHTML = el.innerHTML;&nbsp; &nbsp; }&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;小提琴：https ://jsfiddle.net/Lnrt2zx1/