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 () { showPopup(img.src); }; // 隐藏原始的input元素 input.style.display = "none"; // 添加图片到input元素的父节点 input.parentNode.appendChild(img); }; reader.readAsDataURL(input.files[0]); } }我再设置悬浮窗之前有这段,但是当我点击添加图片时,悬浮窗就出现了,这并不是我想要的,我需要的是添加图片完成后,当我点击图片放大时才出现悬浮窗
时间: 2024-04-15 13:28:54 浏览: 78
非常抱歉之前的回答还是有误。要在点击图片放大时才显示放大图片的悬浮窗,您需要在`img.onclick`事件处理函数中添加逻辑来阻止在添加图片时显示悬浮窗。下面是修改后的代码示例:
```javascript
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 (!img.hasAttribute("data-clicked")) {
// 第一次点击时添加data-clicked属性,避免重复创建悬浮窗
img.setAttribute("data-clicked", "true");
} else {
showPopup(img.src); // 点击图片放大时显示悬浮窗
}
};
// 隐藏原始的input元素
input.style.display = "none";
// 添加图片到input元素的父节点
input.parentNode.appendChild(img);
};
reader.readAsDataURL(input.files[0]);
}
}
```
在上述代码中,我们为图片元素`img`添加了一个自定义属性`data-clicked`,用于标记是否已经点击过图片。在点击事件处理函数中,我们首先检查图片是否已经具有`data-clicked`属性,如果没有,则表示第一次点击图片,此时不显示悬浮窗;如果已经具有`data-clicked`属性,则表示已经点击过图片,此时显示悬浮窗。
这样,只有在点击图片放大时,才会显示放大图片的悬浮窗。
希望这次能满足您的需求!如有任何进一步的问题,请随时提问。
阅读全文