javascript 如何在应用click eventListener后临时禁用href click

carvr3hs 于 2023-01-19 发布在 Java

关注(0)|答案(1)|浏览(112)

我正在开发一个javascript工具，它将click eventListener应用于span以打开工具提示。只有当某个切换设置为true时，单击才会真正起作用。如果切换设置为false，则单击不会起任何作用。然而，当切换打开并且span已经是<a>-标记的一部分时，span基本上有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() {
  ...
}

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

JavaScript

来源：https://stackoverflow.com/questions/75151867/how-to-temporarily-disable-a-href-click-after-a-click-eventlistener-is-applied

1条答案

按热度按时间

wa7juj8i1#

在锚点上添加一个事件监听器来检查切换标志。如果工具提示被切换到打开状态，使用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();
  }
}

赞(0）回复(0）举报 2023-01-19

我来回答

javascript 如何在应用click eventListener后临时禁用href click

1条答案

相关问题

热门标签

最新问答