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

我试图创建一些适当放置的指导性工具提示，用户通过点击来了解网站界面如何工作。每个工具提示都有一个“下一个”链接，通过修改类（以及css）来切换前一个和下一个工具提示的可见性。addEventListener（“click”，...）立即触发

下面是应该做一些这方面的简化代码：

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()，则按照预期点击时会触发。我究竟做错了什么？

来源

2016-02-27 Escher

当你说的document.getElementById（ “工具提示链接1”）。的addEventListener（ “点击”，displayTooltip（2 ））; 您只是在那里调用方法，因此它正在立即执行 – Vatsal

将'displayTooltip（2）'更改为'displayTooltip.bind（null，2）'。有关解释请参见下面的答案 –

当你绑定事件你是calling功能document.getElementById("tooltip-link1").addEventListener("click",displayTooltip(2));

您需要通过参考功能。

更改为以下

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

来源

2016-02-27 08:05:36 JagsSparrow

谢谢。你对调用和传递引用之间的区别的解释使得所发生的事情变得可以理解（我认为addEventListener接受引用，而不是函数themseves）。 – Escher

当你写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));

来源

2016-02-27 08:11:27 Rajesh

不同的方式+1 – JagsSparrow

您需要调用此方法作为回调。既然你称它为displayTooltip（2），你最终会调用该行的函数。

你需要做的是绑定回调，而不是在该行调用。喜欢的东西

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

希望这是一些帮助

快乐学习

来源

2016-02-27 08:12:15 Vatsal

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

回答

相关问题