模态框
1、因为a链接和和顶级document都注册了单击事件，所以要组织a链接冒泡，不然又会从document的单击事件走一遍
2、在document的单击事件中，只需要判断触发事件的目标元素是不是白色盒子部分就行了
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????* { ???????????padding: 0; ???????????margin: 0; ???????} ???????body, html { ???????????height: 100%; ???????} ???????.mask { ???????????width: 100%; ???????????height: 100%; ???????????position: fixed; ???????????top: 0; ???????????left: 0; ???????????background: rgba(0, 0, 0, 0.6); ???????????display: none; ???????} ???????.login { ???????????width: 200px; ???????????height: 200px; ???????????background: white; ???????????margin: 200px auto; ???????????border: 3px solid #FFA25E; ???????} ???</style></head><body><a href="#">注册</a><a href="#">登陆</a><div class="mask"> ???<div class="login" id="login"></div></div><script> ???//需求：点击登陆a链接，显示模态框，之后点击除了中间白色登陆框部分，都可以将模态框部分隐藏 ???var a = document.getElementsByTagName("a")[1]; ???var mask = document.getElementsByTagName("div")[0]; ???a.onclick = function (ev) { ???????ev = ev || window.event; ???????mask.style.display = "block"; ???????if (ev || ev.stopPropagation) { ???????????ev.stopPropagation(); ???????} else { ???????????ev.cancelBubble = true; ???????} ???} ???document.onclick = function (ev) { ???????ev = ev || window.event; ???????var targetId = ev.target ? ev.target.id : ev.srcElement.id; ???????if (targetId !== "login") { ???????????mask.style.display = "none"; ???????} ???}</script></body></html>事件委托
1、普通注册事件没有办法为新创建的元素绑定事件。所以我们要使用冒泡的特性，事件委托。
2、
JS——冒泡案例
原文地址：http://www.cnblogs.com/wuqiuxue/p/7988074.html