Функция вызывается дважды по событию

Question

У меня есть приложение, содержащее форму с пятью полями ввода. Когда пользователь нажимает на поле ввода, должна отображаться подсказка, которая отлично работает. Проблема возникает, когда я пытаюсь удалить всплывающую подсказку, которая происходит, если пользователь нажимает на другое поле ввода. Ниже приведен фрагмент кода из моего приложения, и я надеюсь, что этого достаточно, чтобы понять, как оно работает.

Аргументы, которые передаются в "showTooltip ()", являются ссылкой DOM на поле ввода, по которому щелкнули мышью, текстом, отображаемым во всплывающей подсказке, и числом (0-4), которое используется для нахождения содержащего div, который является окружение поля ввода, по которому щелкнули (все поля ввода находятся внутри собственного 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);
}

Answer 1

unbind - это функция jquery, поэтому она не будет работать, если вы не используете jquery.Вам нужно будет использовать функцию removeEventListener без jquery.Если вы решите использовать 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

В вашей функции ShowTooltip вы добавляете прослушиватель событий, который запускает hideTooltip при размытии. Если вы показываете всплывающую подсказку более одного раза, вы устанавливаете более одного слушателя события onBlur, что означает, что в следующий раз, когда вы размыте, вы дважды активируете функцию hideTooltip.

Одно из решений - отсоединить прослушиватель событий от inputField при запуске hideTooltip.

Удачи.

Answer 3

Каждый раз, когда нажимается поле ввода, вы связываете событие размытия с этим полем.Нажмите еще раз, другое событие связано с этим полем.Вот почему он вызывается более одного раза, потому что вы связываетесь каждый раз.Вы можете сначала отменить привязку, а затем добавить.Возможно, есть лучшее решение, но это будет работать:

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

Примечание: Это удалит ВСЕ функции событий, связанные с 'blur' для этого элемента