使事件处理程序忽略子级

Question

假设我有一个类似于下面的代码（这非常简化，但相对相同的想法）<div>    <div class="parent" ondragenter="enter()" ondragleave="leave()">        <div class="child">            Stuff        </div>    </div></div>我希望能够在父 div 上拖动另一个 div 并触发 ondragenter 和 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 的指标。

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