如何在div未包含链接的情况下，实现点击图片跳转链接并新标签页打开？

实现方案 #

有两种成熟实现方式，可根据你的场景选择：

方案1：原生HTML实现（无需引入JS，兼容性最好）

直接在现有图片外层嵌套<a>标签配置跳转规则即可，完全保留原有懒加载、样式效果，修改后代码如下：

<div class="css-1owz1l2">
    <!-- 新增a标签配置跳转 -->
    <a href="替换为你的目标页面地址" target="_blank" rel="noopener noreferrer">
        <span class=" lazy-load-image-background blur lazy-load-image-loaded" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border-radius: 4px; cursor: pointer; object-fit: cover; display: flex;">
             <img style="height: 100%; width: 100%; object-fit: cover; border-radius: 4px; background: rgba(0, 0, 0, 0) none repeat scroll 0% 0%;" src="https://public.nftstatic.com/static/nft/zipped/9082041d35194edd87f9078dc9440f7b_zipped.jpeg" sx="[object Object]">
        </span>
    </a>
</div>

属性说明：

• target="_blank"：控制链接在新标签页打开
• rel="noopener noreferrer"：安全属性，避免新打开页面获取原页面权限产生安全风险

方案2：JS事件实现（适合无法修改HTML结构的场景）

如果不能改动现有HTML代码，直接绑定点击事件实现跳转，JS代码如下：

// 选中你要绑定点击事件的图片元素
const targetImg = document.querySelector('.css-1owz1l2 img')
targetImg.addEventListener('click', () => {
    // 第一个参数填目标页面地址，第二个参数固定为_blank表示新标签页打开
    window.open('替换为你的目标页面地址', '_blank')
})

内容的提问来源于stack exchange，提问作者Q Q