输入模糊触发功能，除非点击某些 link

Question

我似乎无法弄清楚其中的逻辑，希望有人能给点建议。

我正在创建一个组合框指令，它被简化为：

<div class="combobox" ng-click="$event.stopPropagation()">
    <input type="text" ng-model="search.value" placeholder="System" ng-class="{ resultsOpen: showDropdown }" ng-change="revealDropdown()" ng-focus="revealDropdown()" ng-blur="hideDropdown()">
    <a class="dropdown" ng-click="toggleDropdown($event)"></a>
    <div class="results" ng-show="showDropdown">
        <a ng-repeat="set in data | filter:search" ng-click="setBox($event, set)" ng-bind-html="set.value"></a>
</div>

我创建的 link 函数如下：

link: function (scope, element, attrs) {
    scope.showDropdown = false;
    $combobox = element.children('.combobox');
    $combobox.children('.results').css({ 'top': $combobox.outerHeight(), 'width': $combobox.outerWidth() });
    $combobox.children('.dropdown').css('height', $combobox.outerHeight());

    scope.toggleDropdown = function ($event) {
        $event.stopPropagation();
        scope.showDropdown = scope.showDropdown?false:true;
    };
    scope.revealDropdown = function () {
        if (isNaN(scope.search) || scope.search.length == 0 || $filter('filter')(scope.data, scope.search).length) 
            scope.showDropdown = true;
        else 
            scope.showDropdown = false;
    };
    scope.hideDropdown = function () {
        scope.showDropdown = false;
    };
    $('html').click(function () {
        scope.hideDropdown();
        scope.$apply();
    });

    scope.setBox = function ($event, set) {
        console.log(set);
        scope.search = set;
    };
}

经过 30 分钟的摆弄，这个问题变得很明显，当您在选项中单击 link 时，您会触发模糊，导致 link 设置在 links点击功能触发。

我唯一能想到的就是创建一个小的超时，它会在大约 200 毫秒后关闭，如果点击成功，请取消设置超时，但这绝对是一种 hacky 方法。我想知道是否有人有更合乎逻辑的方法。

JSFiddle（虽然我不确定我是否设置正确）：http://jsfiddle.net/v7mbrku2/

Answer 1

使用ng-mousedown代替ng-click:

<a ng-repeat="set in data" ng-mousedown="setBox($event, set)">

之所以有效，是因为 mousedown 事件发生在 blur 之前，而 click 事件发生在 blur 之后。

这是一个工作演示：http://plnkr.co/edit/QG2GcCSkOTcx91wvQzu0?p=preview

输入模糊触发功能，除非点击某些 link

Trigger function on input blur UNLESS clicking certain link

angularjs

angularjs-directive