"dragenter"は子要素によってブロックされません。

Question

https://jsfiddle.net/7scfk81L/

私はこの

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

などの文書構造を持っていると私はコンテナ

にdragEnter & dragLeaveリスナーを追加します。しかし、私は、ファイルにドラッグするとき、それはコンテナdragLeaverと「のdragEnterがトリガされます'イベント子要素を通過するとき

作成する方法はありますか親要素はブロックされていませんか？

私は私がよく..私は自分自身にスイッチを設定し

によって解決子要素が

Answer 1

を操作することができることを願って、innerにpointer-events: noneを追加しようとした が、それは私が本当に欲しいものではありません、 子要素のイベント、および親要素スイッチ

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

に基づいてイベントをフィルタリング