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」，...）立即觸發

回答

相關問題