Javascript 我们如何做到当用户点击除弹出框以外的任何地方时，弹出框将关闭。

我正试图学习如何建立一个日期选择器，就像在

基本上，我在文本框的onblur事件中显示“date popup”=无，但这当然不起作用（因为如果用户单击弹出框本身，它将触发文本框的模糊事件并隐藏弹出框，这不是我想要的）

---

我想知道我们如何使它，当用户点击任何地方，但弹出框，弹出框将关闭

jQueryUIDatePicker是一个非常高级的小部件。jQueryUI的开发人员有一个名为

\u checkExternalClick

的事件处理程序，它应用于

mousedown

事件。此事件处理程序检查几件事（datepicker是否已打开，单击元素的id是否==到datepicker的id，datepicker是否有markerclass（添加到元素类名以指示datepicker附件），datepicker是否有triggerclass（例如图标触发器），等等）。如果所有操作都通过，则调用

\u hideDatepicker

函数

---

下面是jQueryUIDatePicker正在做的一个简化示例：。您可能不需要检查jQuery UI datepicker检查的所有内容，因为您编写的小部件很可能不需要像分布式框架那样可定制。

简单的选项是创建一个点击捕获的透明div，其z索引小于弹出框。将div样式设置为

位置：固定；宽度：100%；身高：100%；左：0；顶部：0

，使其覆盖整个可见屏幕。您可能希望将其附加到body标记的内容中，以便确保它不包含在具有固定或绝对位置的其他内容中

然后，您需要做的就是将close处理程序绑定到此div，当单击它时，您可以删除弹出窗口以及div本身

如果你想变得有趣，你可以使div稍微不透明，这有助于向用户表明他们的注意力应该集中在弹出窗口上

---

另一个选项是跟踪窗口对象上的鼠标向下或单击事件，将鼠标坐标与弹出窗口的边界框进行比较，并通过关闭弹出窗口并阻止默认事件操作来处理外部单击。坦率地说，这要复杂得多，而且容易出现错误，因此，如果第一种技术适合您的需要，请尝试它。

您能展示一些代码吗？