javascript - 如何正确观察元素外的点击？

Question

当我点击“添加新项目”按钮时，我希望显示一个弹出表单。 然后，如果我在这个表单之外单击，我希望它隐藏自己。 要显示/隐藏表单，我使用 ng-show 指令。为了观察外部点击，我使用第三方 Angular 指令 angular-clickout但是有一个问题——这个指令开始在页面加载时工作，当我点击“添加新项目”按钮时，它立即调用我的关闭函数，这反过来将 bool 属性设置为 false 值和 ng-show隐藏一个表单...

HTML:

<button ng-click="vm.displayDialogAddNewItem()>Add New Item</button>
<div class="new-item-dialog" 
     ng-show="vm.dialogAddNewItemIsVisible"     
     click-out="vm.hideDialogAddNewItem()">
    ... omitted code ...
</div>

Controller 代码:

vm.displayDialogAddNewItem = function() {
    vm.dialogAddNewItemIsVisible = true;
};

vm.hideDialogAddNewItem = function() {
    vm.dialogAddNewItemIsVisible = false;
};

Answer 1

您需要防止事件在 DOM 树中向上冒泡，从而防止父处理程序(在窗口上，关闭模式)收到事件通知。

<!-- Pass the $event to the handler -->
<button ng-click="vm.displayDialogAddNewItem($event)>Add New Item</button>

JS

vm.displayDialogAddNewItem = function($event) {
    vm.dialogAddNewItemIsVisible = true;
    $event.stopPropagation(); // Stop bubbling up.
};