仅针对实际点击的 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>

Answer 1

让我们一步一步来。首先，无论用户点击哪里，您都希望隐藏现有的工具提示（如果有的话）。一种方法是使用此功能：

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

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

 window.addEventListener('click', hideTooltip);

现在对于我们想要显示工具提示的每个元素（我无法从问题中判断如何 select 这些所以你必须添加一个循环来做到这一点）

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>

Answer 2

经过一些研究，我发现了我的“问题”：

我总是在 Firefox 的“移动/触摸模式”中检查我的样式是否也能在触摸设备和不同的屏幕尺寸上正确显示。当我检查我的工具提示时，它有一个 :hover 伪 class，Firefox 浏览器（在桌面使用但更改为“移动模式”）在点击工具提示时什么也没做。

我试了又试，决定使用 JavaScript 通过点击功能打开工具提示。在没有得到任何帮助和解决方案来实现这一目标之后（JavaScript 对我来说是新手），我有一个想法，如果它在我的 phone 上有效，就尝试一次...... Tadaaa，我的眼睛变大了工具提示正常工作。

我做了一些研究，发现具有触摸功能的不同设备会将 :hover pseudo class 更改为点击功能，以便它可以在设备上运行。最大的问题是：为什么 Firefox 不“模拟”真实触摸设备的行为？当您认为您实际上是在触摸环境中进行测试时，我认为这是非常误导的……但实际上并非如此……

Person with similar problem to emulate a "real" touch device

Here´s a possible solution for emulating a touch device with Firefox

是的，我本可以早点在我的 phone 上测试它，但我信任 Firefox。因此，对于遇到相同问题的每个人：当 Firefox 中的“移动模式”无法正常工作时，最好先在“真实”移动设备上进行测试，然后再尝试添加更多代码。

Here´s for example a link that helps how to deal with :hover on touch screen devices

感谢阅读。

此致

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

Trigger the JavaScript function just for the actual clicked id

javascript

function

onclick

tooltip