javascript - How to "dragenter" is not blocked by child elements? -

https://jsfiddle.net/7scfk81l/

i have document structure this

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

and add dragenter & dragleave listener container

but when dragged file, trigger container dragleaver , 'dragenter' event when passing through child element

is there way make parent element unblocked?

i tried add pointer-events: none inner, that's not want, hope child elements can manipulated

well.. solved myself

set switch on child element event, , parent element filters events based on switch

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

wiki