Angular中使用@HostListener监听drop事件失效问题排查

你漏掉了**dragover事件的监听与处理**。浏览器默认会阻止文件拖拽到页面的行为，只有在dragover事件中调用event.preventDefault()，才能解除浏览器的默认拦截，让drop事件正常触发。你的代码里只处理了dragenter，但dragenter仅在拖拽元素首次进入目标区域时触发，而拖拽过程中持续触发的dragover才是让drop生效的关键。

@HostListener('drop', ['$event'])
onDrop(event: DragEvent): void {
  event.stopPropagation();
  event.preventDefault();
  console.log('drop!');
  // 可在此获取拖拽的文件
  const files = event.dataTransfer?.files;
  if (files?.length) {
    // 编写文件处理逻辑
  }
}

@HostListener('dragenter', ['$event'])
onDragEnter(event: DragEvent): void {
  event.stopPropagation();
  event.preventDefault();
  console.log("drag enter");
}

@HostListener('dragover', ['$event']) // 新增该事件监听
onDragOver(event: DragEvent): void {
  event.stopPropagation();
  event.preventDefault();
  console.log("drag over");
}

@HostListener('dragleave', ['$event'])
onDragLeave(event: DragEvent): void {
  event.stopPropagation();
  console.log("drag leave");
}

• 所有拖拽相关事件（dragenter、dragover、drop）都建议调用stopPropagation()和preventDefault()，避免事件冒泡到上层元素触发浏览器默认行为。
• 若尝试全局监听window:drop，需同时处理window:dragover事件，否则全局drop事件仍会被浏览器拦截。

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