当我将图片放入区域时，为什么 addEventListener 不起作用？

Question

I'm making "Drag and Drop File Upload". But Now I have a problem.

As you see that,When I drag something on "drop-zone", The border-style become solid.

Then When I leave my mouse from "drop-zone", The border-style become dashed.

The problem is when I drop something on "drop-zone", It doesn't come back to dashed.

What's my problem with the code?

 document.querySelectorAll(".drop-zone__input").forEach(inputElement => { let dropZoneElement = inputElement.closest(".drop-zone"); dropZoneElement.addEventListener("dragover", e => { dropZoneElement.classList.add("drop-zone__over"); }); ["dragleave", "dragend"].forEach(type => { dropZoneElement.addEventListener(type, e => { dropZoneElement.classList.remove("drop-zone__over"); }); }); dropZoneElement.addEventListener("drop", e => { dropZoneElement.classList.remove("drop-zone__over"); }); });

 .drop-zone { border: 5px dashed plum; display: flex; justify-content: center; align-items: center; text-align: center; width: 250px; height: 250px; font-size: 30px; font-weight: bold; padding: 30px; border-radius: 10px; cursor: pointer; }.drop-zone__over { border-style: solid; }.drop-zone__thumb { width: 100%; height: 100%; background-color: rgb(207, 207, 207); border-radius: 10px; position: relative; overflow: hidden; }.drop-zone__thumb::after { content: attr(data-label); position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgb(114, 113, 113); padding: 5px 0; }.drop-zone__input { display: none; }

 <div class="drop-zone"> <span class="drop-zone__prompt">Click here or Drag a picture</span> <.-- <div class="drop-zone__thumb" data-label="tesdfsdfsdfsdfsdfsdfsxt.txt"></div> --> <input type="file" name="myFile" class="drop-zone__input"> </div>

Answer 1

does adding e.preventDefault() fix it in your original code?

 document.querySelectorAll(".drop-zone__input").forEach(inputElement => { let dropZoneElement = inputElement.closest(".drop-zone"); dropZoneElement.addEventListener("dragover", e => { e.preventDefault(); // HERE dropZoneElement.classList.add("drop-zone__over"); }); ["dragleave", "dragend"].forEach(type => { dropZoneElement.addEventListener(type, e => { dropZoneElement.classList.remove("drop-zone__over"); }); }); dropZoneElement.addEventListener("drop", e => { e.preventDefault(); // HERE dropZoneElement.classList.remove("drop-zone__over"); }); });

 .drop-zone { border: 5px dashed plum; display: flex; justify-content: center; align-items: center; text-align: center; width: 250px; height: 250px; font-size: 30px; font-weight: bold; padding: 30px; border-radius: 10px; cursor: pointer; }.drop-zone__over { border-style: solid; }.drop-zone__thumb { width: 100%; height: 100%; background-color: rgb(207, 207, 207); border-radius: 10px; position: relative; overflow: hidden; }.drop-zone__thumb::after { content: attr(data-label); position: absolute; bottom: 0; left: 0; width: 100%; background-color: rgb(114, 113, 113); padding: 5px 0; }.drop-zone__input { display: none; }

 <div class="drop-zone"> <span class="drop-zone__prompt">Click here or Drag a picture</span> <.-- <div class="drop-zone__thumb" data-label="tesdfsdfsdfsdfsdfsdfsxt.txt"></div> --> <input type="file" name="myFile" class="drop-zone__input"> </div>