忽略某些元素的ng-blur事件

Ignore ng-blur event for certain elements

本文关键字：ng-blur 事件 元素      更新时间：2023-09-26

我有一个搜索字段，下面有一个建议框。当我输入搜索字段时，建议就会出现在它的下方。当我点击字段外的某个地方时，我希望建议框消失。我希望能够点击建议并进行搜索。

<input ng-blur="suggestionBox.hide()" ng-model='someModel' />
<div class='suggestion-box'>
<ul>
<li ng-repeat="suggestion in suggestions" ng-click="someFunction()">suggestion.name</li>
</ul>
</div>

问题是，由于ng-blur, ng-click没有被触发——建议框变得隐藏，但点击事件没有被触发。我试过ng-click="$event.preventDefault(); someFunction()"，但它不起作用。我试图在hide()方法上设置超时，它有效，但我必须设置一个大超时，如200ms，一般我认为这是一个糟糕的解决方案。

编辑:

http://plnkr.co/edit/9BR7Sv2502S87HO56Ofp?p=preview

我所做的一件事是在我想要点击的项目上提供ng-mousedown和ng-mouseup函数，同时绕过onBlur。我还没找到别的办法。在我的例子中，它是一种取消编辑按钮。

  1. 在鼠标下，我设置了一个标志"inWhateverMode = true"。鼠标下移很重要，因为它会在模糊之前触发。
  2. 在模糊处理程序中，检查是否在whatevermode。
  3. 在鼠标上清除任何标志…完成预期的操作。

当想要允许用户单击按钮，然后将光标从初始按钮移开，然后松开而不会产生负面影响时，这很方便。比如无意中点击了删除按钮。

更新Plunk: http://plnkr.co/edit/raJzMor9ci8dLgzXuQII?p=preview

ng-mousedown='startToShowItem(item)' ng-mouseup='show(item)'

好的，我想这就是你要找的:

http://plnkr.co/edit/r3SlOXg6VuTZDABPCAxq?p =

预览

函数运行，然后下拉菜单消失?

美元范围。Show = function(item) {美元的范围。Hidden = true;警报(项)

};

修改HTML: 

<input ng-model='search' />
<div ng-hide='hidden' style='border:1px solid black'>
相关文章：