Question

我有这样的文档结构

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

我添加dragEnter＆amp; 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

如何“dragenter”不被子元素阻止？

1 个答案: