Как вызвать foo только при нажатии кнопки "Фокусировка"

У меня есть директива, в которой я привязываю события focus и click к элементу:

app.directive('mydirective', function () {
  return {
    link: function ($scope, $element, $attrs) {
      $element.bind('click focus', function (e) {
        foo(e);
      });
    }
  };
});

Я хочу называть foo один раз, если focus или click или событие запущено, но при нажатии на элемент срабатывает событие focus, а foo вызывается 2 раза. как предотвратить вызов foo в 2 раза?

Изменить: Да. Я не очень хорошо сочетал наведение с щелчком и фокусом. Спасибо каждому телу

Ответ 1

Вы можете отменить события, которые будут только запускать функцию для первого события

$element.bind('click focus', function(e) {
    if ( !$(this).data('fired') ) foo(e);

    $(this).data('fired', true);

    setTimeout(function(self) {
        $(self).data('fired', false);
    }, 200, this);

});

FIDDLE

Ответ 2

Еще одна версия реализации функции debounce:

link: function($scope, $element, $attrs) {

    var callOnce = (function() {
        var timeout;
        return function(e, callback) {
            clearTimeout(timeout);
            timeout = setTimeout(function() {
                callback.call(self, e);
            }.bind(this), 200); 
        };
    })();

    $element.bind('click focus mouseover', function(e) {
        callOnce.call(this, e, foo);
    });
}

Демо: http://plnkr.co/edit/HjwedaqUcGj6KncpDtwJ?p=preview

Ответ 3

Я бы предложил использовать только событие фокуса, если вы хотите, чтобы foo() вызывался при щелчке и фокусировке, потому что клик не срабатывает в одиночку, а также вызывает фокусировку элемента,
поскольку вы упомянули, что элемент не может быть введен, поэтому вы можете использовать событие click вместо фокуса
но в вашем случае, как вы говорите, его уволили 3 раза, возможно, щелчок дважды запускается, а фокус запускается один раз, когда фокус срабатывает дважды, и нажмите один раз, и в этом случае используйте e.preventDefault(); в своем клике и фокусе,
```
app.directive('mydirective', function () {
  return {
    link: function ($scope, $element, $attrs) {
      $element.bind('click', function (e) {
        e.preventDefault();
        foo(e);
      });
    }
  };
});
```
таким образом вы можете удостовериться, что повторный вызов такого же события не будет продолжаться дважды.

Или самый простой способ - проверить, введен ли элемент привязкой событие фокуса, иначе связать событие click

app.directive('mydirective', function () {
  return {
    link: function ($scope, $element, $attrs) {

        if(element is input)
        {    
              $element.bind('focus', function (e) {
                e.preventDefault();
                foo(e);
              });
        }
        else
        {       
              $element.bind('click', function (e) {
                e.preventDefault();
                foo(e);
              });
        }
    }
  };
});