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

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

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

christophe · 技术社区 · 12 年前

我有一个下拉菜单,里面有一个输入字段来搜索我的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 回复 | 直到 12 年前

tasseKATT 12 年前

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>

推荐文章

Matthew Gertner · 无法阻止“touchmove”在iOS上滚动窗口

8 年前

Joeytje50 · 为什么在Chrome[复制]中使用preventDefault将<select multiple>框滚动到顶部

8 年前

user9127206 · Javascript-事件不能与其他事件一起使用

8 年前

Christoffer Corfield Aakre · 无法使用jQuery选择元素

9 年前

Tarik Kaoukab · 事件preventDefault()不工作

10 年前

user2132498 · 在具有动态值的函数上使用的变量不允许我通过ajax发送表单

11 年前

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

12 年前

jerrygarciuh · 访问锚点属性和event.prventDefault()

12 年前

Michael · event.prventDefault();在Firefox中不停止鼠标滚轮

14 年前