分类导航
程序笔记程序问答

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

程序问答   发布时间：2022-06-01  发布网站：大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了仅针对实际点击的 id 触发 JavaScript 函数，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决仅针对实际点击的 id 触发 JavaScript 函数？

开发过程中遇到仅针对实际点击的 id 触发 JavaScript 函数的问题如何解决？下面主要结合日常开发的经验，给出你关于仅针对实际点击的 id 触发 JavaScript 函数的解决方法建议，希望对你解决仅针对实际点击的 id 触发 JavaScript 函数有所启发或帮助；

我在一页上有一堆工具提示。将鼠标悬停在父 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 {
  @R_502_4612@: 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.5);
  /* @R_502_4612@ the tooltip text */
  @R_502_4612@: 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>

解决方法

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

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.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>

,

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

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

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

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

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

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

是的，我本可以更早地在手机上进行测试，但我信任 Firefox。因此，对于遇到相同问题的每个人：最好先在“真实”移动设备上进行测试，如果 Firefox 中的“移动模式”不起作用，然后再尝试添加更多代码。

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

感谢阅读。

问候

大佬总结

以上是大佬教程为你收集整理的仅针对实际点击的 id 触发 JavaScript 函数全部内容，希望文章能够帮你解决仅针对实际点击的 id 触发 JavaScript 函数所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：JavaScript
猜你在找的程序问答相关文章
其他相关热搜词更多
JavaScript字符串对象运算符count异步uisqloraclejsonpromisehttphttpsaxios常量forwhile循环Length算法