代码之家 › 专栏 › 技术社区 › christophe

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

preventdefault angularjs-ng-repeat drop-down-menu angularjs

christophe · 技术社区 · 11 年前

我有一个下拉菜单,里面有一个输入字段来搜索我的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>

提前非常感谢!

1 回复 | 直到 11 年前

tasseKATT 11 年前

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>

推荐文章

Jack Finan · 引导下拉菜单不可见

6 年前

Lakito · 如何在PHP上向日期(年份)下拉菜单添加单词?

6 年前

PvDev · 如何在html中显示下拉选择按钮?

6 年前

DaveSwans · Matlab应用程序设计器。使用下拉菜单打开和关闭面板

6 年前

Mike Pinkman · 从下拉列表中获取文本并使用JQuery将其插入到输入文本中?

6 年前

Adriano Di Cara · topnav裁剪的CSS下拉列表

6 年前

billy_56 · 引导选择列表为空-角度

6 年前

Willy_Sunny · Bootstrap4下拉菜单填充输入组

6 年前

user3580480 · 在ASPX应用程序(VB)中添加条件下拉列表项

6 年前

T.BOBBEH · 隐藏具有多个下拉列表的列[已关闭]

6 年前