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

每次点击输入字段时，您都会将'blur'事件绑定到该字段。再次单击另一个事件绑定到该字段。这就是为什么它不止一次被调用，因为你每次都有约束力。您可以先取消绑定，然后重新添加。可能有更好的解决方案，但这可行：

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

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

Answer 3

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

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

祝你好运。

函数被事件调用两次

3 个答案: