如何在應用點擊事件監聽器后暫時禁用 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(); } }