Javascript 在拖动锚元素时停止锚href导航？

我有以下资料：

它利用库在喜欢/不喜欢时设置动画/事件

标记如下所示：

<div id="tinderslide">
  <ul>
    <li class="pane1">
      <a href="www.google.com">
        <div class="img"></div>
        <div>Miami Beach</div>
        <div class="like"></div>
        <div class="dislike"></div>
      </a>
    </li>
    <li class="pane2">
      <a href="www.google.com">
        <div class="img"></div>
        <div>Miami Beach</div>
        <div class="like"></div>
        <div class="dislike"></div>
      </a>
    </li>
    <li class="pane3">
      <a href="www.google.com">
        <div class="img"></div>
        <div>Miami Beach</div>
        <div class="like"></div>
        <div class="dislike"></div>
      </a>
    </li>
    <li class="pane4">
      <a href="www.google.com">
        <div class="img"></div>
        <div>Miami Beach</div>
        <div class="like"></div>
        <div class="dislike"></div>
      </a>
    </li>
    <li class="pane5">
      <a href="www.google.com">
        <div class="img"></div>
        <div>Miami Beach</div>
        <div class="like"></div>
        <div class="dislike"></div>
      </a>
    </li>
  </ul>
</div>

我的问题是，当我释放单击以喜欢、不喜欢或放下卡片时，链接被导航。我想防止这种情况发生，让链接只在单击/点击时工作，而不是在拖动时工作

使用event.preventDefault（）方法停止事件冒泡。示例

对于每个li，您可以使用以下行替换代码：- 迈阿密海滩

---

您可以这样做，而不是在图像周围放置锚定点：

。这样，您就可以拖动图像而无需跟随链接。或者HTML必须是这样吗？@UndoingTech HTML必须保留，因为还有其他元素也充当“卡片”，需要对拖动和单击做出响应。