Question

我有一个带有输入字段的下拉菜单来搜索我的li元素。问题是：每当我点击输入字段以放入我的搜索查询时，就会发生点击事件并且下拉菜单消失。

我在输入字段上尝试了preventDefault，但它没有用。我该如何阻止这种行为？

这是一个Plunker：http://plnkr.co/edit/SlbWZ5Bh62MDKWViUsMr

这是我的标记（这是ng-model =“customerFilter”的输入）：

<div class="button">
  <a class="btn btn-large grey dropdown-toggle" data-toggle="dropdown" href="#">
    Organisation
  </a>
  <ul class="dropdown-menu grey" >
    <input type="text" ng-model="customerFilter">
    <li ng-repeat="customer in customers | filter:customerFilter | orderBy:sortorder" ng-click="addCardGrey(customer)">{{ customer.name }}</li>
  </ul>
</div>

非常感谢您提前！

Answer 1

preventDefault停止浏览器对该事件的默认操作。

您想要使用的是stopPropagation，它会阻止事件冒泡事件链。

例如，你可以在这样的指令中使用它：

代码：

.directive('myInput', function () {
    return {
        restrict: 'A',
        link: function (scope, element) {
            element.bind('click', function (event) {
                event.stopPropagation();
            });
        }
    };
});

标记：

<input type="text" ng-model="customerFilter" my-input>

在下拉菜单中的输入字段上停止单击事件（AngularJS过滤器元素）

1 个答案: