Как предотвратить падение аудио файла?

Question

Как мне прослушать падение файлов на всей странице? Я пытался что-то вроде этого, чтобы остановить падение (используя document, document.body, window ...):

document.addEventListener("drop", evt => {
  evt.preventDefault(); 
  evt.stopPropagation(); 
  console.log("drop", evt);
  debugger; 
})

Это не работает, как я ожидал. Если я уроню аудиофайл на страницу, он откроется и начнет воспроизводиться.

Answer 1

В этом случае вам нужен слушатель "dropend", который будет прослушивать, когда отбрасывание завершено в каком-либо элементе.

window.addEventListener("dragend", () => {
	alert("element throw in the window")
})

#draggable {
    width: 200px;
    height: 20px;
    text-align: center;
    background: white;
  }

  .dropzone {
    width: 200px;
    height: 20px;
    background: blueviolet;
    margin-bottom: 10px;
    padding: 10px;
  }

<div class="dropzone">
    <div id="draggable" draggable="true" ondragstart="event.dataTransfer.setData('text/plain',null)">
        Drag to the white zone
    </div>
</div>