dragleave事件意外地被触发（请参见演示中的控制台），导致遮罩层一出现就隐藏。如果您注释掉隐藏遮罩层的代码，则它自然会显示出来并永远不会消失。我自己解决了这个问题。
拖动事件会向上传递。所以，我认为由于这个原因，当我使我的叠加层可见时，它会触发该事件dragenter，并且可能在进一步拖动时，它的子项会触发dragleave，并且冒泡到我正在监听的父级。
然而，事实证明，无论dragenter的目标是孩子还是其他，dragleave都会在触发dragenter时触发！所以，在我的情况下，一旦我使叠加层可见，就会在其上触发dragenter，在document和window上触发dragleave。
因此，理想的放置目标不能有任何子元素，这样在自身内部拖动不会触发dragleave。在我的情况下，放置目标叠加层占据了整个窗口空间，因此仅需在叠加层DOM上监听dragleave即可解决90%的问题。
但是，当用户拖动其中的子元素div时，仍然存在问题。 解决方案也很简单。我的要求是将子div对鼠标事件隐藏。为此，我们有神奇的CSS-pointer-events。将此属性设置为none即可解决问题。唯一的缺点是，在IE 11之前不支持此功能。
查看演示http://jsfiddle.net/fSB32/5/
如果你确实需要支持IE11以下版本，那么可以使用一个技巧，在拖放目标中放置一个空的div作为子元素，并确保它具有最高的z-index并覆盖整个拖放目标。这样，拖动事件应该只会被定向到该DOM，因为所有其他子元素都"穿过"它可见。
以下是JS/jQuery代码。我已经留下PoC，所以不要浪费我失去的所有时间。
jQuery(document).on('dragover', '#drop-area', function(event) {
event.preventDefault();
event.stopPropagation();
jQuery('#drop-popup').css('display','block');
});
jQuery(document).on('dragover dragleave drop', '#drop-popup', function(event) {
event.preventDefault();
event.stopPropagation();
console.log(event.type);
// layout and drop events
if ( event.type == 'dragover') {
jQuery('#drop-popup').css('display','block');
}
else {
jQuery('#drop-popup').css('display','none');
if ( event.type == 'drop' ) {
// do what you want to do
// for files: use event.originalEvent.dataTransfer.files
// for web dragged elements: use event.originalEvent.dataTransfer.getData('Text') and CURL to capture
}
}
});body {
background: #ffffff;
margin: 0px;
font-family: sans-serif;
}
#drop-container {
margin: 100px 10%; /* for online testing purposes only */
width: 80%; /* for jsfiddle purposes only */
display: block;
float: left;
overflow: hidden;
box-sizing: content-box;
position: relative; /* needed to use absolute on #drop-popup */
border-radius: 5px;
text-align: center;
cursor: default;
border: 2px dashed #000000;
}
#drop-area {
display: block;
float: left;
padding: 10px;
width: 100%;
}
#drop-popup {
display: none;
box-sizing: content-box;
position: absolute;
width: 100%;
top: 0;
left: 0;
background: linear-gradient(to BOTTOM, rgba(245, 245, 245, 1) , rgba(245, 245, 245, 0));
height: 512px;
padding: 20px;
z-index: 20;
}
#drop-popup > p {
pointer-events: none;
}<html>
<head>
<title>Drag and Drop</title>
</head>
<body>
<div id="drop-container">
<div id="drop-area">
<p>Child paragraph content inside drop area saying "drop a file or an image in the dashed area"</p>
<div>This is a child div No. 1</div>
<div>This is a child div No. 2</div>
</div>
<div id="drop-popup">
<p>This DIV will cover all childs on main DIV dropover event and current P tag is the only one with CSS "pointer-events: none;"</p>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" type="text/javascript"></script>
</body>
<html>