javascript - 仅针对实际点击的 id 触发 JavaScript 函数

Question

我在一页上有一堆工具提示。将鼠标悬停在父 div 上时，子 div（工具提示）会通过 css 显示。现在我尝试让它在点击时运行。第一个工具提示有效并通过我的代码显示，当我在子 div 外部单击时也会隐藏。我知道问题出在 id 上（必须是唯一的）。我怎样才能实现，该功能直接在应用的 div 上，我点击。就像当我单击第三个 div（父级）时，它也会被其子级 div（工具提示）触发？对我来说，很奇怪 Javascript 无法识别我单击哪个元素，然后将我的函数应用于该元素，除非我想要其他东西......现在第一个工作正常，其余的被忽略......希望你能提供帮助。

谢谢

//Showing the tooltip on click

document.getElementById("website-tooltip-container-1").addEventListener("click", function() {
  var element = document.getElementById("test-1");
  element.classList.add("website-tooltiptext-visible");
});

//Removing tooltip when clicked outside tooltip container or outside tooltip itself

document.addEventListener('mouseup', function(e) {
  var container = document.getElementById('test-1');
  if (!container.contains(e.target)) {
    container.classList.remove("website-tooltiptext-visible");
  }
});

/* Tooltip Container */

.website-tooltip {
  position: relative;
  display: flex;
  justify-content: center;
  cursor: pointer;
  font-family: Roboto;
  font-size: 18px;
  font-weight: 400;
  color: #666;
}


/* Tooltip text */

.website-tooltip .website-tooltiptext {
  visibility: hidden;
  max-width: 350px;
  font-family: open sans;
  font-size: 13px;
  line-height: 22px;
  background-color: #FFFFFF;
  color: #666;
  text-align: left;
  padding: 11px 15px 11px 15px !important;
  border-radius: 3px;
  box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.5);
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 100%;
  margin: 0px 0px 0px 0px;
}


/* Show the tooltip text when you mouse over the tooltip container */

.website-tooltip:hover .website-tooltiptext {
  visibility: visible;
}


/* Hide when hovering over tooltip div */

div.website-tooltiptext:hover {
  display: none;
}


/* Toggle this class to show Tooltip on click via Javascript */

.website-tooltiptext-visible {
  visibility: visible !important;
  display: block !important;
}

<div id="website-tooltip-container-1" class="website-tooltip"><span class="dottedunderline">Tooltip 1</span>
  <div id="test-1" class="website-tooltiptext">Blabalabalbalablablabla.
  </div>
</div>

<div id="website-tooltip-container-2" class="website-tooltip"><span class="dottedunderline">Tooltip 2</span>
  <div id="test-2" class="website-tooltiptext">Blabalabalbalablablabla.
  </div>
</div>

<div id="website-tooltip-container-3" class="website-tooltip"><span class="dottedunderline">Tooltip 3</span>
  <div id="test-3" class="website-tooltiptext">Blabalabalbalablablabla.
  </div>
</div>

<div id="website-tooltip-container-4" class="website-tooltip"><span class="dottedunderline">Tooltip 4</span>
  <div id="test-4" class="website-tooltiptext">Blabalabalbalablablabla.
  </div>
</div>

标签： javascriptfunctiononclicktooltip

Answer 1

让我们一步一步来。首先，无论用户单击何处，您都想隐藏现有的工具提示，如果有一个可见的话。一种方法是拥有这个功能：

function hideTooltip() {
  let el = document.querySelector(".website-tooltiptext-visible");
  if (el) { el.classList.remove("website-tooltiptext-visible");}
}

如果用户单击窗口上的任何位置，我们希望隐藏工具提示，因此：

 window.addEventListener('click', hideTooltip);

现在对于我们要显示工具提示的每个元素（我无法从问题中判断如何选择这些元素，因此您必须添加一个循环来执行此操作）

el.addEventListener('click', showTooltip);

在哪里

  function showTooltip(e) {
     e.stopPropagation(); // we don't want the window to see the click as well
     hideTooltip();
     this.classList.add("website-tooltiptext-visible");
}

更新我们现在有了问题中的代码，因此可以确定哪些元素是可点击的。这是添加了上述代码的片段（并删除了对悬停和原始 JS 的引用）。

function showTooltip(event) {
  event.stopPropagation(); // we don't want the window to see the click as well
  hideTooltip();
  this.classList.add("website-tooltiptext-visible");
}
function hideTooltip() {
  let el = document.querySelector(".website-tooltiptext-visible");
  if (el) { el.classList.remove("website-tooltiptext-visible"); }
}

window.addEventListener('click', hideTooltip);//hide the tooltip if the user clicks anywhere on the window

//For each of the elements where we want to show a tooltip add an eventlistener to pick up clicks
const els = document.querySelectorAll(".website-tooltip");
for (let i = 0; i < els.length; i++) {
  els[i].addEventListener('click', showTooltip);
}

/* Tooltip Container */

.website-tooltip {
  position: relative;
  display: flex;
  justify-content: center;
  cursor: pointer;
  font-family: Roboto;
  font-size: 18px;
  font-weight: 400;
  color: #666;
  background-color: #eee; /* added just to show where the clickable areas are */
}

/* Tooltip text */

.website-tooltip .website-tooltiptext {
  visibility: hidden;
  max-width: 350px;
  font-family: open sans;
  font-size: 13px;
  line-height: 22px;
  background-color: #FFFFFF;
  color: #666;
  text-align: left;
  padding: 11px 15px 11px 15px !important;
  border-radius: 3px;
  box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.5);
  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  top: 100%;
  margin: 0px 0px 0px 0px;
}

/* Toggle this class to show Tooltip on click via Javascript */

.website-tooltiptext-visible .website-tooltiptext {
  visibility: visible;
  display: block;
}

<div id="website-tooltip-container-1" class="website-tooltip"><span class="dottedunderline">Tooltip 1</span>
  <div id="test-1" class="website-tooltiptext">Test-1 text Blabalabalbalablablabla.
  </div>
</div>

<div id="website-tooltip-container-2" class="website-tooltip"><span class="dottedunderline">Tooltip 2</span>
  <div id="test-2" class="website-tooltiptext">Test-2 text Blabalabalbalablablabla.
  </div>
</div>

<div id="website-tooltip-container-3" class="website-tooltip"><span class="dottedunderline">Tooltip 3</span>
  <div id="test-3" class="website-tooltiptext">Test-3 text Blabalabalbalablablabla.
  </div>
</div>

<div id="website-tooltip-container-4" class="website-tooltip"><span class="dottedunderline">Tooltip 4</span>
  <div id="test-4" class="website-tooltiptext">Test-4 text Blabalabalbalablablabla.
  </div>
</div>