拖拽图片时出现Cannot read properties of undefined (reading 'dataTransfer')错误原因排查

核心错误原因 #

出现Cannot read properties of undefined (reading 'dataTransfer')的直接原因是没有监听并阻止dragover事件的默认行为。浏览器默认会拦截文件拖拽的drop操作，即便你在drop事件里调用event.preventDefault()，如果不先处理dragover事件，drop事件触发时event.dataTransfer会被浏览器清空，导致它变成undefined。

另外你的代码还有几个次要问题，虽不直接引发当前错误，但会影响后续逻辑：

• const target = document.getElementById(event.target.id)完全多余，event.target本身就是触发事件的DOM元素，没必要通过id重新获取；如果触发元素是无id节点（比如内部的<span>），这条代码会得到null，引发其他问题。
• CSS存在拼写错误：dahsed应为dashed，cursor:pointer"多了一个闭合引号，会导致样式失效。
• this.childNodes.forEach遍历的是#app的所有子节点，包括换行产生的空白文本节点，你的过滤逻辑if(node !== target) return会跳过大部分有效节点，逻辑不符合预期。

修复后的代码 #

JS代码

function dropHandler(event) {
  event.preventDefault();
  // 直接用event.target，无需重复获取
  if (event.target.classList.contains('drop-zone')) {
    console.log(event.dataTransfer.files);
  }
}

function dragoverHandler(event) {
  event.preventDefault();
  // 可选：添加拖拽状态样式
  event.target.classList.add('drop-area--over');
}

function dragleaveHandler(event) {
  event.target.classList.remove('drop-area--over');
}

function eventHandler(element, eventType, callback) {
  return document.getElementById(element).addEventListener(eventType, callback, false);
}

// 必须添加dragover事件监听
eventHandler('app', 'dragover', dragoverHandler);
eventHandler('app', 'drop', dropHandler);
eventHandler('app', 'dragleave', dragleaveHandler);

HTML代码

<div id="app">
  <div id="1" class="drop-zone">
    <span style="pointer-events: none">Drag and drop a file here</span>
  </div>
</div>

CSS代码

.drop-zone {
  border: 1px dashed #ccc; 
  width: 200px; 
  height: 200px; 
  cursor: pointer;
}
.drop-area--over {
  border-style: solid;
}

关键说明 #

• 必须监听dragover并调用event.preventDefault()，这是让浏览器允许drop操作、保留dataTransfer数据的核心步骤。
• 用classList.contains('drop-zone')判断目标拖拽区域，比通过id判断更灵活，也避免了文本节点的干扰。

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