Javascript 如何正确监视元素外部的单击？

当我点击“添加新项目”按钮时，我想显示一个弹出表单。 然后，如果我在表单外部单击，我希望它隐藏自己。 要显示/隐藏表单，我使用

ng show

指令。为了观察外部点击，我使用了第三方Angular指令，但有一个问题-该指令开始在页面加载时工作，当我点击“添加新项目”按钮时，它立即调用关闭函数，该函数反过来将布尔属性设置为假值，

ng show

隐藏表单

HTML:

---

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

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

---

这与JavaScript中事件的工作方式有关

假设您有以下HTML：

<div id="content">
  <input type="button />
</div>

“单击button1然后单击button2将不会关闭第一个弹出窗口，因为单击事件已中止。”只有当button2是button1的父级时才是如此，这是不可能的。@Blaise请记住，检测元素外部单击的单击事件必须位于某个父级元素上，最好是尽可能高的位置。因此，如果他们共享此父项，则第一个弹出窗口不会关闭，这可能是
body
。所以我认为很有可能。clickout使用
窗口
作为共享父项。请参阅：相关：此方法存在一些问题。例如，如果你有两个按钮，可以产生一个弹出窗口。单击按钮1，然后单击按钮2将不会关闭第一个弹出窗口，因为共享父级从未看到任何单击事件。对于clickout模块，此共享父级是窗口。见：另见：
<!-- Pass the $event to the handler -->
<button ng-click="vm.displayDialogAddNewItem($event)>Add New Item</button>

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

<div id="content">
  <input type="button />
</div>