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

Question

我有一个搜索字段，其下方有建议框。当我在搜索字段中输入内容时，建议会出现在其下方。当我单击字段外的某个位置时，我希望建议框消失。我希望能够点击建议并执行搜索。

<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() 方法上设置超时，它有效，但我必须设置一个像 200 毫秒这样的大超时，通常我认为这是一个糟糕的解决方案。

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

Answer 1

我所做的一件事是在我想要点击的项目上提供 ng-mousedown 和 ng-mouseup 函数，同时绕过 onBlur。我还没有找到任何其他方法。就我而言，它是一种取消编辑按钮。

1. 在鼠标按下时，我设置了一个标志“inWhateverMode = true”。 mousedown 很重要，因为它在模糊之前触发。
2. 在模糊处理程序中，检查是否处于WhateverMode。
3. 鼠标松开时，您将清除所有标志...完成预期的操作。

当想要允许用户单击按钮，然后将光标移离初始按钮，然后放开而不产生负面影响时，这非常方便。就像无意中点击删除按钮一样。

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

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