函数被事件调用两次

Question

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

传递给“showTooltip()”的参数是对单击的输入字段的 DOM 引用、工具提示中显示的文本以及用于查找单击的周围的包含 div 的数字 (0-4)输入字段（所有输入字段都位于自己的 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);
}

Answer 1

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);

Answer 2

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

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

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

Answer 3

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

一种解决方案是在运行 hideTooltip 时取消事件侦听器与 inputField 的绑定。

祝你好运。