javascript - 如何让 "dragenter"不被子元素挡住？

Question

https://jsfiddle.net/7scfk81L/

我有这样的文档结构

<div id="container">
  <div id="inner"></div>
</div>

然后我将 dragEnter & dragLeave 监听器添加到容器

但是当我拖动到文件中时，它会触发容器 dragLeaver 和传递子元素时的 'dragEnter' 事件

有什么办法可以让父元素畅通无阻吗？

我尝试将 pointer-events: none 添加到 inner，但这不是我真正想要的，希望子元素可以被操作

Answer 1

嗯..我自己解决了

在子元素事件上设置一个开关，父元素根据开关过滤事件

let isChildEntered

container.addEventListener('dragenter', (e) => {
    if (!isChildEntered) {
      console.log('dragenter')
  }
})

container.addEventListener('dragleave', (e) => {
  if (!isChildEntered) {
    console.log('dragleave')
  }
}, true)

inner.addEventListener('dragenter', e => {
    isChildEntered = true
})

inner.addEventListener('dragleave', e => {
    isChildEntered = false
})

See demo