适配移动端的点击触发信息卡片显示/隐藏JavaScript方案咨询

嘿，我来请教个前端适配的问题：我做了一张地图，桌面端用户鼠标悬停在数字上时，会弹出一个信息卡片；点击数字的话，会跳转到对应信息的官网。但这个逻辑在移动端完全行不通，毕竟移动端没有鼠标悬停的操作。

我现在想实现的效果是：在移动端点击数字时弹出信息卡片，再次点击就隐藏卡片；或者有没有更优的方案，能同时适配桌面端和移动端的交互？

我搜了一圈没找到和我现有JS代码类似的解决方案，而且我本身对JavaScript不太熟悉，现在的代码是参考其他示例拼凑出来的。之前看到过一篇《Jquery show on hover hide on click》的帖子，但好像不太适配我的场景。

下面是我的现有JavaScript逻辑：

let paths      = document.querySelectorAll("path");
let cardWidth  = card.getBoundingClientRect().width;
let cardHeight = card.getBoundingClientRect().height;

paths.forEach((p) => {
  p.addEventListener("mouseleave", (evt) => {
    card.style.visibility = "hidden";
  });
  p.addEventListener("mousemove", (evt) => {
    let pos  = oMousePos(svg, evt);
    let text = p.dataset.text;
    card.style.visibility = "visible";
    card.style.top = pos.y + "px";
    card.style.left = pos.x + "px";
    card.innerHTML = text;
  });
});

function oMousePos(element, evt) {
  let ClientRect = element.getBoundingClientRect();
  let currentX   = Math.round(evt.clientX - ClientRect.left);
  let currentY   = Math.round(evt.clientY - ClientRect.top);

  //close to right
  if (evt.clientX + cardWidth >= ClientRect.right) {
    currentX = Math.round(evt.clientX - ClientRect.left - cardWidth);
  }
  //close to bottom
  if (evt.clientY + cardHeight >= ClientRect.bottom) {
    currentY = Math.round(evt.clientY - ClientRect.top - cardHeight);
  }
  return {
    x: currentX,
    y: currentY
  };
}

有没有大佬能帮忙调整下代码，或者给个适配两端的思路呀？万分感谢！

备注：内容来源于stack exchange，提问作者camster