Question

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

以下是一些应该执行此操作的简化代码：

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（并正确切换类）。如果我将displayTooltip替换为alert()，则会在点击时触发，如预期的那样。我做错了什么？

Answer 1

当你绑定事件时，calling函数为document.getElementById("tooltip-link1").addEventListener("click",displayTooltip(2));

您需要传递对该函数的引用。

更改为

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

Answer 2

当您编写functionName后跟()时，它会调用函数。如果您希望将函数分配给处理程序，则应该执行

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

现在，如果您希望将参数传递给此函数，您可以将其包装在类似

的函数中

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

或者您可以使用.bind()

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

Answer 3

您需要将此方法称为回调。由于您将其称为displayTooltip（2），因此您最终会在该行调用该函数。

您需要做的是绑定回调而不是在该行调用。像

这样的东西

 .addEventListener('event', function()
     { displayTooltip(2) }

希望这会有所帮助

快乐学习

addEventListener（“click”，...）立即触发

3 个答案: