函数被事件调用两次

问题描述：

我有一个应用程序包含一个带有五个输入字段的表单。当用户点击输入字段时，应该显示工具提示，工作正常。当我尝试删除工具提示时会出现问题，如果用户单击另一个输入字段就会发生这种情况。下面是我的应用程序中的一段代码，我希望足够了解它的工作原理。函数被事件调用两次

传递给“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); 
}

答

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

请注意，在处理事件时使用jQuery具有巨大的优势，因为它可以处理幕后的事情，以确保事件适用于所有浏览器。 IE8及以下版本不支持'addEventListener'和'removeEventListener'函数。相反，你将不得不使用'attachEvent'和'detachEvent'。 – chawkinsuf

谢谢。我试过了代码（这真的会像我看到的那样），但由于某种原因显示了相同的错误？：/ – holyredbeard

你现在看到什么错误？你使用的是什么浏览器？ – chawkinsuf

答

每次输入字段被点击，你将'blur'事件绑定到该字段，再次点击另一个事件绑定到该字段，这就是为什么它被多次调用的原因。如果你每次都有约束力。您可以先解除绑定，然后再次添加。有可能是一个更好的解决方案，但是这将工作：

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

注：这将删除该元素

感谢您的回答。但是，当试用代码时，我在控制台“Object＃中没有方法'unbind'”出现以下错误？ – holyredbeard

答

上势必“模糊”所有的事件的功能在你的ShowTooltip功能，要添加触发hideTooltip模糊的事件监听器。如果您多次显示工具提示，则会设置多个onBlur事件侦听器，这意味着下次模糊时，将触发两次hideTooltip函数。

一个解决方案是在运行hideTooltip时，将事件侦听器从inputField中解除绑定。

祝你好运。

函数被事件调用两次

相关推荐