已在dragenter、dragover中调用event.preventDefault，drop事件仍不触发如何解决

问题根因 #

• 拖拽时鼠标经过.drop_zone内部的<p>子元素，子元素会承接拖拽事件，而子元素没有绑定dragenter、dragover的默认行为阻止逻辑，导致drop事件被浏览器拦截
• 拖拽事件冒泡到上层节点后触发了浏览器默认拖拽行为，覆盖了自定义的drop逻辑

修复方案 #

方案1（推荐，改动最小） #

新增CSS规则，禁止内部元素响应鼠标事件，所有拖拽事件统一由父容器承接：

.drop_zone {
 border: 5px black dashed;
 width: 300px;
 height: 200px;
}
/* 新增规则 */
.drop_zone * {
  pointer-events: none;
}

方案2（兼容复杂场景） #

修改JS事件处理逻辑，同时阻止默认行为和事件冒泡：

function onDrop(e){
    e.preventDefault();
    e.stopPropagation();
    // 此处可添加drop后续处理逻辑，比如获取拖拽文件：e.dataTransfer.files
}

function onDragEnter(e){
    e.preventDefault();
    e.stopPropagation();
}

function onDragOver(e){
    e.preventDefault();
    e.stopPropagation();
}

两种方案任选其一即可正常触发ondrop事件，如果你有拖拽区域内部元素交互的需求，优先选方案2。

内容的提问来源于stack exchange，提问作者Wagner Vieira