javascript - 不使用<a>标记就调用LightBox onclick

对于图片库，我使用灯箱打开图片。我称呼它的方式是通过带有数据关系的标签，如下所示。

<a href="../catalog-reseller/wall/abstract/w10197169324.jpg" data-rel="lightcase:gallery" title="w10197169324">

是否可以在不使用的情况下在onclick上调用完全相同的东西？

我完整的代码是：

<div class="justified">
   <a href="../catalog-reseller/wall/abstract/w10197169324.jpg" data-rel="lightcase:gallery" title="w10197169324">
        <img src="../catalog-reseller/wall/abstract/w10197169324.jpg" alt="w10197169324">
    </a>
</div>

我想添加一些出现在图像悬停上的按钮，例如添加到购物车或添加到收藏夹。问题是影响图像区域中的所有内容，因此按钮无用，因为我单击的任何地方都会打开图像。
我认为将链接设为非活动状态，并通过单独按钮调用lightbox onclick是一种解决方案。

最佳答案

最简单的解决方案是在链接上移动按钮。例如，创建如下结构：

<div class="justified">
   <a href="../catalog-reseller/wall/abstract/w10197169324.jpg" data-rel="lightcase:gallery" title="w10197169324">
        <img src="../catalog-reseller/wall/abstract/w10197169324.jpg" alt="w10197169324">
    </a>
    <button>Add to cart</button>
</div>

然后使用CSS使按钮绝对定位。