经过上面修改后,在添加图片时仍然出现了悬浮窗
时间: 2024-04-21 20:23:53 浏览: 131
悬浮窗口显示
很抱歉,我之前的回答有误。要解决这个问题,可以在 `previewImage` 函数中添加一个变量来记录图片是否已经添加,并在点击事件处理函数中检查这个变量的值。只有当图片已经添加后,点击事件才会触发显示悬浮窗的操作。以下是修改后的代码示例:
```javascript
var isImageAdded = false; // 图片是否已经添加的标记
function previewImage(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
var img = document.createElement("img");
img.src = e.target.result;
img.alt = "照片";
// 添加图片点击事件处理函数
img.onclick = function () {
if (isImageAdded) {
showPopup(img.src); // 点击图片放大时显示悬浮窗
}
};
// 隐藏原始的input元素
input.style.display = "none";
// 添加图片到input元素的父节点
input.parentNode.appendChild(img);
isImageAdded = true; // 图片已经添加标记为true
};
reader.readAsDataURL(input.files[0]);
}
}
```
通过添加 `isImageAdded` 变量来判断图片是否已经添加,只有当图片已经添加后,点击事件才会触发显示悬浮窗的操作。这样就可以避免在添加图片时出现悬浮窗了。
阅读全文