如何实现点击页面任意位置(元素不在对话框内部)隐藏对话框？

Question

如图所示，我这里 e.target.id != "popup"这样不太准确

Answer 1

https://developer.mozilla.org/zh-CN/docs/Web/API/Node/contains
https://api.jquery.com/jQuery.contains/#jQuery-contains-conta...

Answer 2

event对象有个target属性, 只要 target属性=== #popup 元素, 或者 #popup.contains(target) 就忽略就行.

contains方法是DOMNode提供的.

Answer 3

其实点击弹窗外部的部分关闭这个, 本质上点击的依然是弹窗的内容.
其实就是加一个透明的大小与可视区域一样大的盒子, 这个盒子也是弹窗的一部分, 如图elementUI实现的:
第一张是所谓的蒙版, 第二张是可视的窗口, 在蒙版里面

本文参与了SegmentFault 思否面试闯关挑战赛，欢迎正在阅读的你也加入。

Answer 4

$("#bg-mask").click(function () {
  $("#popup, #bg-mask").addClass("hide")
})