Javascript 函数被事件调用两次

我有一个包含五个输入字段的表单的应用程序。当用户单击一个输入字段时，应该显示一个工具提示，这很好。当我试图删除工具提示时会出现问题，如果用户单击另一个输入字段，就会出现这种情况。下面是我的应用程序中的一段代码，我希望它足以理解它是如何工作的

传递给“showTooltip（）”的参数是对单击的输入字段的DOM引用、工具提示中显示的文本以及用于查找围绕单击的输入字段的包含div的数字（0-4）（所有输入字段都在各自的div内）

该应用程序工作正常，但在我在字段上单击了几次之后，控制台中会显示以下消息：“未找到节点-inputDiv.removeChild（工具提示）。我发现出现这种情况的原因是函数“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);
}

---

每次单击输入字段时，都会将“模糊”事件绑定到该字段。再次单击另一个事件将绑定到该字段。这就是为什么它会被多次调用，因为您每次都绑定。您可以先解除绑定，然后再添加。可能有更好的解决方案，但这会奏效：

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

---

注意：这将删除该元素上绑定到“blur”的所有事件函数

在ShowTooltip函数中，您正在添加一个事件侦听器，用于触发blur上的hideTooltip。如果多次显示工具提示，则设置了多个onBlur事件侦听器，这意味着下次模糊时，将触发hideTooltip函数两次

一种解决方案是在运行hideTooltip时从inputField解除事件侦听器的绑定

---

祝你好运。

解除绑定是jquery函数，因此除非您使用jquery，否则它不会工作。您需要在不使用jquery的情况下使用
removeEventListener
函数。如果您决定使用jquery，我建议使用
一个
（）函数，每个元素只执行一次事件。我不确定在调用
removeEventListener
之前是否需要检查事件是否存在

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

谢谢你的回答。但是，在尝试代码时，我在控制台中遇到以下错误“Object#has no method‘unbind’”？请注意，在处理事件时使用jquery具有巨大的优势，因为它将在幕后处理事件，以确保事件在所有浏览器中都能正常工作。IE8及以下版本不支持
addEventListener
和
removeEventListener
功能。相反，您必须使用
attachEvent
和
detachEvent
。谢谢。我已经试过了代码（在我看来，它确实可以工作），但由于某种原因，显示了相同的错误？：/我试过Chrome和Firefox。在Firefox中，我得到了以下错误“Node was not found.formDiv.removeChild（tooltip）；”，在Chrome中是“Uncaught error:not_found_ERR:DOM Exception 8”。可能有某种方式模糊事件仍然会被多次触发，因为移除调用仅在再次绑定之前完成。您可能应该将对
removeEventListener
的调用移动到
hideTooltip
函数。通过这种方式，您可以确保不会从同一事件中调用两次
hideTooltip
。我想我知道发生了什么。由于您是在
showTooltip
函数中定义函数，因此每次都会创建一个新的引用。因此，
removeEventListener
无法正确删除事件。您需要声明函数变量，以便引用保持不变。一旦这样做，您甚至可能不需要调用
removeEventListener
，因为“如果使用相同的参数在同一EventTarget上注册了多个相同的EventListener，则会丢弃重复的实例。”[