addEventListener（“click”，...）立即开始 [英] addEventListener("click",...) firing immediately

问题描述

我正在尝试创建一些适当位置的教学工具提示，用户通过点击即可了解网站界面的工作原理。每个工具提示都有一个下一个链接，通过修改类（以及css）来切换前一个和下一个工具提示的可见性。

这里有一些简化的代码，它是应该这样做：

 函数displayTooltip（t）{
 //...s代码确定工具提示IDnext和previous
 document.getElementById（previous）.className =tooltip invisibleTooltip; 
 document.getElementById（next）.className =tooltip; 
 
 $ b $ document.getElementById（tooltip-link1）。addEventListener（click，displayTooltip（2））; 
  

displayTooltip 立即被调用（并正确切换当我将这段代码粘贴到控制台（或页面加载）时。如果我用 alert（）替换 displayTooltip ，它会在点击时触发，如预期的那样。我在做什么错了？

解决方案

当你绑定事件时，你是调用函数 document.getElementById（tooltip-link1）。addEventListener（click，displayTooltip（2））;

改变为

  document.getElementById（tooltip-link1）。addEventListener（click，function（）{
 displayTooltip（2）
}）; 
  

I'm trying to create some appropriately-placed instructional tooltips that users click through to understand how the site interface works. Each tooltip has a "next" link that toggles the visibility of the previous and next tooltips by modifying the classes (and hence, css).

Here's some simplified code that is supposed to do this:

function displayTooltip(t){
  //...some code to determine the tooltip IDs "next" and "previous"
  document.getElementById(previous).className = "tooltip invisibleTooltip";
  document.getElementById(next).className = "tooltip";
}

document.getElementById("tooltip-link1").addEventListener("click", displayTooltip(2));

displayTooltip is called immediately (and correctly toggles the class) when I paste this code into the console (or on page load). If I replace displayTooltip with an alert(), it fires when I click, as anticipated. What am I doing wrong?

解决方案

When you are binding event you are calling the function document.getElementById("tooltip-link1").addEventListener("click",displayTooltip(2));

You need to pass reference to the function.

Change to below

document.getElementById("tooltip-link1").addEventListener("click", function(){
   displayTooltip(2)
});

这篇关于addEventListener（“click”，...）立即开始的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！