让事件处理程序忽略子项

Question

假设我有一个类似于下面的代码（这是非常简化的，但思想相对相同）<div>    <div class="parent" ondragenter="enter()" ondragleave="leave()">        <div class="child">            Stuff        </div>    </div></div>我希望能够将另一个 div 拖动到父 div 之上，并触发 ondragagenter 和 ondragleave 事件。这可行，但有一个问题。当项目被拖入子项时，事件也会触发。停止传播不起作用，因为它只是在子元素所在的位置创建了一个“洞”，而问题仍然存在。有什么办法可以完全不理孩子吗？这样我就可以将项目拖入或拖出子项，并且不会触发任何事件；它们仅在项目进入和离开父项时才触发？我已经坚持这个问题一个多星期了，所以任何帮助将不胜感激。

Answer 1

使用事件委托，您只需在最外层父级上设置事件处理程序并处理那里的所有事件。在处理程序中，您可以测试event.target以查看事件的源元素是什么，并且仅当该元素是您想要的元素时才继续。

这是一个click事件示例：

document.querySelector(".parent").addEventListener("click", function(event){

  console.log("Either the parent or the child was clicked.");

  // Only react if the source of the event was the parent, not the child.

  if(event.target.classList.contains("parent")){

     alert("you clicked on the parent");

  }

});

<div>Click on both the parent and the child. Only the parent will perform the desired action.

    <div class="parent">

      I'm the parent

        <div class="child">

            I'm the child

        </div>

    </div>

</div>

Answer 2

最后，我解决问题的方法是完全删除 onleave 事件。这是造成大多数问题的原因。

因此，现在在 onenter 上，我只是检查 currentTarget 是否与之前访问过的 currentTarget 不同。如果是，则禁用先前访问的 currentTarget 的指示器，并激活新的 currentTarget 的指示器。

这实际上比我预期的要好，因为即使您离开卡但没有输入新卡，该指示器也会保持不变。这样您就可以随时跟踪您上次输入的位置。