如何使用JavaScript（非jQuery）实现点击页面空白后关闭弹窗？

Question

类似的问题在这里：http://segmentfault.com/q/1010000000452465

/* Mark 1 的原理：
判断点击事件发生在区域外的条件是：
1. 点击事件的对象不是目标区域本身
2. 事件对象同时也不是目标区域的子元素
*/

我明白这个原理，但是如何判断点击的区域是否是目标区域的子元素呢？

因为项目要求，只能使用JavaScript实现。

Answer 1

补充一种做法并不使用contains，而是利用事件冒泡。 在出现弹窗（是指同一页面的浮层吧？）的同时，给document绑定点击事件，在事件处理函数内关闭这个弹窗。然后，也给这个弹窗元素绑定一个点击事件，在事件处理函数内阻止冒泡（event.stopPropagation()和event.cancelBubble=true）。

因为页面内任何地方的点击，正常都可以冒泡到document，然后关闭这个弹窗。然后只有弹窗阻止了这个冒泡，所以也达到了仅点击弹窗（及其子元素）之外的空白区域来关闭弹窗。

Answer 2

if ((目標區域).contains(e.target)) ...

Answer 3

其实可以加一个遮罩层。。弹窗在遮罩层之上，其他在遮罩层之下，这样你只要点击遮罩层就会关闭弹窗。。很多框架都是这么实现的