函數被事件調用兩次

我有一個應用程序包含一個帶有五個輸入字段的表單。當用戶點擊輸入字段時，應該顯示工具提示，工作正常。當我嘗試刪除工具提示時會出現問題，如果用戶單擊另一個輸入字段就會發生這種情況。下面是我的應用程序中的一段代碼，我希望足夠了解它的工作原理。函數被事件調用兩次

傳遞給「showTooltip（）」的參數是對單擊的輸入字段，顯示在工具提示中的文本以及用於查找包含的div的數字（0-4）的DOM引用圍繞點擊的輸入字段（所有輸入字段都在它們自己的div內）。

該應用程序工作正常，但在點擊了幾次字段後，控制檯中顯示以下消息：「節點未找到 - inputDiv.removeChild（tooltip）。我發現了對於這種情況的原因是，該功能「hideTooltip（）」有時也被稱爲兩次，但我不能找出原因，爲什麼會這樣。

任何線索？

showTooltip: function(inputField, tooltipText, divNr){ 
    var container = document.getElementById('container'); 
    var inputDiv = container.getElementsByTagName('div'); 
    var inputDiv = inputDiv[divNr]; 

    var tooltip = document.createElement('div'); 
    tooltip.className = "tooltip"; 

    var text = document.createTextNode(tooltipText); 
    tooltip.appendChild(text); 

    inputDiv.appendChild(tooltip); 

    inputField.addEventListener('blur', function() { hideTooltip(inputField, inputDiv, tooltip, inputNode);}); 
}, 

hideTooltip: function(inputField, inputDiv, tooltip, nr){ 
    inputDiv.removeChild(tooltip); 

    validateField(inputField); 
}

來源

2011-12-02 holyredbeard

unbind是jquery函數，所以它不會工作，除非你使用jQuery。你將需要使用沒有jQuery的removeEventListener函數。如果你決定使用jQuery，我會推薦one（http://api.jquery.com/one/）函數，每個元素只執行一次事件。我不確定您是否需要在致電removeEventListener之前查看事件是否存在。

var blurEvent = function() { hideTooltip(inputField, inputDiv, tooltip, inputNode); }; 
inputField.removeEventListener('blur', blurEvent); 
inputField.addEventListener('blur', blurEvent);

來源

2011-12-02 18:36:13 chawkinsuf

請注意，在處理事件時使用jQuery具有巨大的優勢，因爲它可以處理幕後的事情，以確保事件適用於所有瀏覽器。 IE8及以下版本不支持'addEventListener'和'removeEventListener'函數。相反，你將不得不使用'attachEvent'和'detachEvent'。 – chawkinsuf

謝謝。我試過了代碼（這真的會像我看到的那樣），但由於某種原因顯示了相同的錯誤？：/ – holyredbeard

你現在看到什麼錯誤？你使用的是什麼瀏覽器？ – chawkinsuf

每次輸入字段被點擊，你將'blur'事件綁定到該字段，再次點擊另一個事件綁定到該字段，這就是爲什麼它被多次調用的原因。如果你每次都有約束力。您可以先解除綁定，然後再次添加。有可能是一個更好的解決方案，但是這將工作：

inputField.unbind('blur'); 
inputField.addEventListener('blur', function() { hideTooltip(inputField, inputDiv, tooltip, inputNode);});

注：這將刪除該元素

來源

2011-12-02 18:14:23

感謝您的回答。但是，當試用代碼時，我在控制檯「Object＃中沒有方法'unbind'」出現以下錯誤？ – holyredbeard

上勢必「模糊」所有的事件的功能在你的ShowTooltip功能，要添加觸發hideTooltip模糊的事件監聽器。如果您多次顯示工具提示，則會設置多個onBlur事件偵聽器，這意味着下次模糊時，將觸發兩次hideTooltip函數。

一個解決方案是在運行hideTooltip時，將事件偵聽器從inputField中解除綁定。

祝你好運。

來源

2011-12-02 18:15:36 Jemaclus

函數被事件調用兩次

回答

相關問題