如何解决多次触发 Drop 事件
所以我为拖放区域实现了这个逻辑,如果用户添加了一个非图像文件,我会提醒用户该文件不是图像并且它的格式无效。
但是一旦我按下确定,警报就会再次出现,并且有时会持续多次(我实际上计算了这个,并且计数等于您拖放文件的次数)。下面是该方法的相关代码:
function setDropZoneWithCropper() {
var toBeCroppedImage = document.getElementById('toBeCroppedImage');
droparea = document.querySelector("#add-to-be-cropped-image-section");
droparea.addEventListener("dragover",(e) => {
e.preventDefault();
droparea.classList.add("draggableImageHover");
});
droparea.addEventListener("dragleave",() => {
droparea.classList.remove("draggableImageHover");
});
droparea.addEventListener("drop",(e) => {
e.preventDefault();
const image = e.dataTransfer.files[0];
const type = image.type;
if (
type == "image/png" ||
type == "image/jpg" ||
type == "image/jpeg"
) {
var reader = new FileReader();
// reader.onload = function (event) {
// passImagetoCropper(reader.result);
// };
// reader.readAsDataURL(file)
reader.onload = function (event) {
if(reader.result !== null){
passImagetoCropper(reader.result);
}
};
if (image) {
reader.readAsDataURL(image);
}
} else {
alert("Invalid File Format!");
}
});
}
如您所见,addEvent 侦听器是:
droparea.addEventListener("drop",(e) => {
e.preventDefault();
const image = e.dataTransfer.files[0];
const type = image.type;
if (
type == "image/png" ||
type == "image/jpg" ||
type == "image/jpeg"
) {
var reader = new FileReader();
// reader.onload = function (event) {
// passImagetoCropper(reader.result);
// };
// reader.readAsDataURL(file)
reader.onload = function (event) {
if(reader.result !== null){
passImagetoCropper(reader.result);
}
};
if (image) {
reader.readAsDataURL(image);
}
e.stopImmediatePropagation();
} else {
alert("Invalid File Format!");
}
});
Addevent listener Drop 多次触发,我从一些控制台日志中了解到,我该如何解决这个问题?
解决方法
这对我有用,在警报后的 else 子句中添加:
else {
alert("Invalid File Format!");
e.stopImmediatePropagation();
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。