前端点击图片跳转新页面的同时，消除图片预览

算法白菜

已于 2024-04-10 11:43:41 修改

阅读量267

点赞数 1

文章标签：前端

于 2024-04-09 09:41:39 首次发布

本文链接：https://blog.csdn.net/m0_56090828/article/details/137537099

版权

本文介绍了两种方法来防止前端点击图片时原页面的预览效果：一是临时隐藏CSS，二是利用while循环在图片跳转后删除相关HTML元素。第一种方法存在应用配置失效的问题，第二种方法更为根本且处理了HTMLCollection的变化。

摘要由CSDN通过智能技术生成

前端点击图片跳转新页面的同时，原页面图片会放大居中并伴有遮罩层显示。

方法1：掩耳盗铃的小技巧

如果只想要点击图片跳转新页面，不想原页面的图片进行预览显示，有一个小方法（掩耳盗铃）：

图片预览每次会新建一个div标签 class="el-image-viewer__wrapper"，给它加上一个css属性即可掩耳盗铃。

.el-image-viewer__wrapper {
    display: none;
}

上述小技巧有个弊端，当切换应用时，该应用的配置文件失效，即配置的css文件失效，则原来点击图片时所有新建的标签 div.el-image-viewer__wrapper 都会显示出来。

方法2：从根源上消除的方法

问题是 self 是一个 实时列表（HTMLCollection ）。当删除一个项目时, HTMLCollection 的长度会发生变化，一个简单的解决方法是使用 while 循环：

window.open(this.obj.url);
debugger;
var self = document.getElementsByClassName("el-image-viewer__wrapper");
console.log(self);
try {
    while (self.length > 0) {
        self[0].remove();
    }
} catch (e) {
    console.log("error: ")
    console.log(e);
}