我有一段代码，用于将文件拖放到某个区域：

//track drop
document.getElementById("track-drop").addEventListener("dragenter", function(e) {
  e.preventDefault();
  e.target.classList.add("drag-enter");

  console.log("Event: dragenter")
});

document.getElementById("track-drop").addEventListener("dragover", function(e) {
  e.preventDefault();

  console.log("Event: dragover")
});

document.getElementById("track-drop").addEventListener("dragleave", function(e) {
  e.preventDefault();
  e.target.classList.remove("drag-enter");

  console.log("Event: dragleave")
});

document.getElementById("track-drop").addEventListener("drop", function(e) {
  e.preventDefault();
  e.target.classList.remove("drag-enter");

  console.log("Event: drop")

  var dropEvent = e.originalEvent;

  for (var i = 0; i < dropEvent.dataTransfer.files.length; i++) {
    console.log("New file: ", dropEvent.dataTransfer.files[i]);
  }
});

.track-drop {
  border: 2px dashed blue;
  height: 100px;
  width: 200px;
  margin: 1em 0;
}

.track-drop::before {
  content: "Drop file(s) here!";
}

.track-drop.drag-enter {
  border: 2px solid orange;
}

<div class="track-drop" id="track-drop"></div>

问题是收到错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'dataTransfer')

在此 JS 语句中： dropEvent.dataTransfer.files.length

调试器

在我的代码中，调试器指示 e.originalEvent 不存在。但 e.dataTransfer 存在。我不明白为什么。

注意

同样的代码在另一个网页上运行良好。令人惊讶的是，那里存在 e.originalEvent 。但 e.dataTransfer 却不行。

问题

我不明白为什么该代码适用于其他网页，而 不 适用于我的网页。我是否遗漏了依赖项或其他什么？