与javascript中的ondragover相反?

Question

我正在制作一个拖放应用程序，用户可以将文件拖放到div中。当被拖放的文件位于div上方时，div会变为绿色。

var dropzone = document.querySelector(".dropzone");
dropzone.ondragover = event => {
event.target.classList.add("fileover");
};

.dropzone {
border: 1px solid lightgray;
padding: 2rem;
margin: 2rem;
border-radius: 10px;
font-family: Arial;
cursor: pointer;
text-align: center;
font-size: 0.8rem;
}
.fileover {
background-color: green;
}

<input id="file" type="file" style="display: none"/>
<label for="file">
<div class="dropzone" ondrop="event.preventDefault()">Drag and drop or select a file</div>
</label>

但是，假设用户决定不将文件拖放到拖放区，而是将文件从拖放区移开。在这种情况下，空投区保持绿色。当文件离开拖放区时是否会触发一个事件，然后拖放区再次变成白色?比如ondragaway?

Answer 1

您可以使用ondragleave:

注意，为了保持一致性，我还将ondragover替换为ondragenter。

var dropzone = document.querySelector(".dropzone");
dropzone.ondragenter = event => {
event.target.classList.add("fileover");
};
dropzone.ondragleave = event => {
event.target.classList.remove("fileover");
};

.dropzone {
border: 1px solid lightgray;
padding: 2rem;
margin: 2rem;
border-radius: 10px;
font-family: Arial;
cursor: pointer;
text-align: center;
font-size: 0.8rem;
}
.fileover {
background-color: green;
}

<input id="file" type="file" style="display: none"/>
<label for="file">
<div class="dropzone" ondrop="event.preventDefault()">Drag and drop or select a file</div>
</label>