如何在应用点击事件监听器后暂时禁用 href 点击

Question

我正在开发一个 javascript 工具，该工具将 click eventListener 应用于用于打开工具提示的跨度。 只有当某些切换设置为true时，此点击才会真正起作用。 如果切换设置为false ，则单击不会执行任何操作。 但是，当切换打开并且跨度已经是<a>标签的一部分时，跨度基本上有 2 个点击行为。 当切换设置为true时，如何暂时禁用链接点击？

以下是我目前拥有的。

<a href="#">Some <span class="tooltip">text</span></a>

function createTooltips() {
  const spanElements = document.querySelectorAll(".tooltip");
  spanElements.forEach((spanElement) => {
    spanElement.addEventListener("click", openToolTip);
}

function openToolTip() {
  if (toggledOn == true) {
    ...open the tooltip...
  } else {
    return
  }
}

function setToggle() {
  ...
}  

我在这里找到了一些完全删除点击的解决方案。 我还尝试应用pointer-events: none; 样式到跨度，但这将禁用我自己应用的单击事件监听器。

Answer 1

在检查切换标志的锚点上添加事件侦听器。 如果工具提示已打开，请使用Event.preventDefault()来防止单击链接。

 function createTooltips() { const spanElements = document.querySelectorAll(".tooltip"); spanElements.forEach((spanElement) => { spanElement.addEventListener("click", openToolTip); spanElement.parentElement.addEventListener("click", checkToggle); } } } function openToolTip() { if (toggledOn) { //...open the tooltip... } } function checkToggle(e) { if (toggledOn) { e.preventDefault(); } }